Example: React + Redux + Router + TypeScript

Home.tsx

import * as React from 'react'
import { Dispatch } from 'redux'
import { connect } from 'react-redux'

import { AppState } from '../store'
import * as Home from '../modules/home'

// container component

type Props = Home.State & Home.Actions

class Component extends React.Component<Props> {
    componentDidMount() {
        this.props.init()
    }

    render() {
        return (
            <div>
                はろー
            </div>
        )
    }
}

// connect

function mapStateToProps(appState: AppState) {
    return { ...appState.home }
}

function mapDispatchToProps(dispatch: Dispatch<void>) {
    return {
        init: () => {
            dispatch(Home.actions.init())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)

home.tsx

import { actionCreatorFactory } from 'typescript-fsa'
import { reducerWithInitialState } from 'typescript-fsa-reducers'
import { Action } from 'typescript-fsa';

// constants


// actions
const actionCreator = actionCreatorFactory()

export const actions = {
    init: actionCreator('HOME_INIT')
}

export interface Actions {
    init: () => Action<undefined>
}

// states
export interface State {
}

const initState: State = {
}

// reducers
export const Reducer = reducerWithInitialState(initState)
    .case(actions.init, (state) => {
        return {
            ...state,
        }
    })

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux'
import { Route, Switch } from 'react-router'
import { ConnectedRouter } from 'react-router-redux'
import store, { history } from './store'

import Home from './containers/Home'

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route exact path="/"><Home /></Route>
                <Route><h1>Not Found</h1></Route>
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.querySelector('.app')
)

package.json

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --history-api-fallback",
    "build": "rm -rf dist/*.js && webpack --config webpack.prod.js",
    "watch": "rm -rf dist/*.js && webpack -w --config webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/moment": "^2.13.0",
    "@types/moment-range": "^3.1.0",
    "@types/prop-types": "^15.5.2",
    "@types/react": "^16.3.11",
    "@types/react-dom": "^16.0.5",
    "@types/react-redux": "^5.0.16",
    "@types/react-router": "^4.0.26",
    "@types/react-router-redux": "^5.0.15",
    "awesome-typescript-loader": "^5.0.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "http-proxy-middleware": "^0.18.0",
    "moment": "^2.22.1",
    "moment-range": "^4.0.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-tap-event-plugin": "^3.0.2",
    "redux": "^3.7.2",
    "redux-observable": "^0.18.0",
    "source-map": "^0.7.2",
    "source-map-support": "^0.5.4",
    "ts-loader": "^4.2.0",
    "typeface-roboto": "0.0.54",
    "typescript": "^2.8.1",
    "typescript-fsa": "^3.0.0-beta-1",
    "typescript-fsa-reducers": "^0.4.5",
    "typescript-loader": "^1.1.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {}
}

store.ts

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import { createHashHistory, createBrowserHistory } from 'history'

import * as Home from './modules/home'

export type AppState = {
    home: Home.State,
}

export const history = createBrowserHistory()
const middleware = routerMiddleware(history)

const store = createStore(
    combineReducers<AppState>({
        home: Home.Reducer,
        routing: routerReducer,
    }),
    applyMiddleware(middleware)
)

export default store