デバッグ用

redux-logger

Reducerが動いたときに、「実行前のstate」「渡したAction」「実行後のstate」をコンソールログに表示する
デバッグ用のミドルウェア

HTTP リクエスト

redux-promise

ActionCreatorで非同期通信させるミドルウェア
参考：なぜ非同期通信にミドルウェアを使わないといけないのか
参考：Reduxの非同期処理にどのMiddlewareを採用するか

axios

ReduxやReactにはAngularのようにHTTPリクエストする機能がない。
API通信するモジュールはいくつかあるが、その中でもaxiosはpromiseベースで作られており、上記のredux-promiseと相性が良い

例

axios.get(url)
      .then(function(response){
        return response.data;
      })
      .catch(error => {
        return error;
      })

受信成功時には.then()の関数が実行され、
エラー時には.catch()の関数が実行される

コード読みやすさの向上

redux-actions

ActionCreaterやReducerの定型文をなくし、コードを見やすくするためのユーティリティ

redux-actionsを使わずに書く

// ActionCreator
const ADDTAX = 'ADDTAX';
function addTax(value) {
  return {
    type: ADDTAX,
    value
  };
}


// Reducer
const initialState = {
  hoge: '',
};

function appReducer(state = initialState, action) {
  switch (action.type) {
    case ADDTAX:
      return (
        Object.assign({}, state, {hoge: action.value})
      );
    default:
      return state
  }
}

↑これが
↓こう書ける

redux-actionsを使って書く

import { createAction, handleActions } from 'redux-actions';


// ActionCreator
const addTax = createAction('ADDTAX');


// Reducer
const initialState = {
  hoge: '',
};

const appReducer = handleActions({
  [addTax]: (state, action) => (
    Object.assign({}, state, {hoge: action.payload})
  ),
}, initialState);

ルーティング

react-router

「このURLのときはこのコンポーネントを表示させたい」といった処理ができるようにするモジュール。
stateで画面の切り替えを管理するのではなく、URLで管理できる。

react-router-redux

上記のreact-routerをReduxで使うためのもの？

Reduxで使えそうなパッケージ（個人用）