Reduxの書き方手順 ref: https://qiita.com/RichGreenTea/items/47ad65231ce833689c3c

combineReducers.js

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  messageModal,
  aService,
  errorMessage,
  router
});

export default rootReducer;

containersRanking.js

import {connect} from 'react-redux'
import {push} from 'react-router-redux'
import TodoApp from '../components/TodoApp'
import {inputTask, addTask} from "../actions/tasks";

const mapStateToProps = ({tasks}) => {
  return {
    task: tasks.task,
    tasks: tasks.tasks
  };
};

const mapDispatchToProps = (dispatch) => ({
  addTask: task => dispatch(addTask(task)),
  inputTask: task => dispatch(inputTask(task)),
  redirectToError: () => dispatch(push('/error'))
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

containersTodoApp.js

import React from 'react'
import PropTypes from 'prop-types'

const TodoApp = ({task, tasks, inputTask, addTask, redirectToError}) => (
  <div>
    <input type="text" onChange={(e) => inputTask(e.target.value)}/>
    <input type="button" value="add" onClick={() => addTask(task)}/>
    <ul>
      {
        tasks.map((item, i) => {
          return (
            <li key={i}>{item}</li>
          );
        })
      }
    </ul>
    <button onClick={() => redirectToError()}>エラーページへ</button>
  </div>
)

TodoApp.propTypes = {
  task: PropTypes.string.isRequired,
  tasks: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
  inputTask: PropTypes.func.isRequired,
  addTask:  PropTypes.func.isRequired,
  redirectToError: PropTypes.func.isRequired
}

export default TodoApp

createStore.js

import {
  createStore as reduxCreateStore,
  combineReducers,
  applyMiddleware,
  compose
} from 'redux'
import {routerReducer, routerMiddleware} from 'react-router-redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import userReducer from "./reducers/userReducer";
import countReducer from "./reducers/countReducer";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function createStore(history) {
  return reduxCreateStore(
    combineReducers({
      user: userReducer,
      count: countReducer,
      router: routerReducer,
    }),
    composeEnhancers(
      applyMiddleware(
        routerMiddleware(history),
        logger,
        thunk
      )
    )
  );
}

fluxStandrdAction.js

{
  type: FOO_TYPE,      // must
  payload: {object},   // optional
  meta: {object},      // optional
  error: false, true, undefined, null, ... // optional
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Route} from 'react-router-dom'
import {Provider} from 'react-redux'
import {ConnectedRouter} from 'react-router-redux'
import createBrowserHistory from 'history/createBrowserHistory'
import createStore from './store/index'
import TodoApp from './containers/TodoApp'
import Error from './components/Error'

const history = createBrowserHistory();
const store = createStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={TodoApp}/>
        <Route exact path="/error" component={Error}/>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

installMidleware.txt

npm install --save redux-logger redux-thunk

installPropTypes.txt

npm install --save prop-types

installRedux.txt

npm install --save redux react-redux

installRouter.txt

npm install --save react-router-dom react-router-redux@next history

link.js

import {Link} from 'react-router-dom'
<Link to="/error">error</Link>

push.js

import {push} from 'react-router-redux'

dispatch(push('/error'))
Action

Ranking.js

import {connect} from 'react-redux'
import {push} from 'react-router-redux'
import TodoApp from '../components/TodoApp'
import {inputTask, addTask} from "../actions/tasks";

const mapStateToProps = ({tasks}) => {
  return {
    task: tasks.task,
    tasks: tasks.tasks
  };
};

const mapDispatchToProps = (dispatch) => ({
  addTask: task => dispatch(addTask(task)),
  inputTask: task => dispatch(inputTask(task)),
  redirectToError: () => dispatch(push('/error'))
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

switch.js

import {Route, Switch} from 'react-router-dom'

<Switch>
  <Route exact path="/" component={TodoApp}/>
  <Route exact path="/error" component={Error}/>
<Switch/>

taks.js

export const inputTask = (task) => ({
  type: 'INPUT_TASK',
  payload: {
    task
  }
});

export const addTask = (task) => ({
  type: 'ADD_TASK',
  payload: {
    task
  }
});

tasks.js

const initialState = {
  task: '',
  tasks: []
};

export default function tasksReducer(state = initialState, action) {
  switch (action.type) {
    case 'INPUT_TASK':
      return {
        ...state,
        task: action.payload.task
      };
    case 'ADD_TASK':
      return {
        ...state,
        tasks: state.tasks.concat([action.payload.task])
      };
    default:
      return state;
  }
}

thunkActionCreater1.js

export const signIn = (name, email, password) => ({
  type: 'SIGN_IN',
  payload: {name, email, password}
});

export const asyncSignIn = (email, password) => {
  return dispatch => {
    request
      .get(url)
      .set('Content-Type', 'application/json')
      .set('Access-Control-Allow-Origin', '*')
      .query({email: email, password: password})
      .end(function (err, res) {
        if (err) {
          console.log(err);
        } else {
          console.log(res);
          dispatch(signIn(res.body.name, res.body.email, res.body.password));
          dispatch(push('/count'));
        }
      });
  };
};

thunkActionCreater2.js

export const inputEmail = (email) => ({
  type: 'INPUT_EMAIL',
  payload: {email}
});

export const inputPassword = (password) => ({
  type: 'INPUT_PASSWORD',
  payload: {password}
});

export const inputAction = (email, password) => {
  return (dispatch) => {
    dispatch(inputEmail(email));
    dispatch(inputPassword(password));
  };
};

TodoApp.js

import React from 'react'
import PropTypes from 'prop-types'

const TodoApp = ({task, tasks, inputTask, addTask, redirectToError}) => (
  <div>
    <input type="text" onChange={(e) => inputTask(e.target.value)}/>
    <input type="button" value="add" onClick={() => addTask(task)}/>
    <ul>
      {
        tasks.map((item, i) => {
          return (
            <li key={i}>{item}</li>
          );
        })
      }
    </ul>
    <button onClick={() => redirectToError()}>エラーページへ</button>
  </div>
)

TodoApp.propTypes = {
  task: PropTypes.string.isRequired,
  tasks: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
  inputTask: PropTypes.func.isRequired,
  addTask:  PropTypes.func.isRequired,
  redirectToError: PropTypes.func.isRequired
}

export default TodoApp