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

#デバッグ用
##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で使うためのもの？