Awesome Redux エコシステムとミドルウェア チートシート

Redux エコシステムにおける必須ライブラリ、Action Creator、および非同期ミドルウェアのパターンを網羅したリファレンスです。

Action Creator とユーティリティ

redux-actions

Flux Standard Action (FSA) 規格に準拠した Action Creator を生成：

import { createAction } from 'redux-actions';

const increment = createAction('INCREMENT', amount => amount);
// increment(42) → { type: 'INCREMENT', payload: 42 }

// Automatically handles error objects:
const err = new Error('Network failure');
// increment(err) → { type: 'INCREMENT', payload: err, error: true }

See: redux-actions on npm

---

Flux Standard Action (FSA)

Flux の Action オブジェクトに対する標準仕様 (type, payload, error, 任意の meta のみで構成)：

// Success action
{
  type: 'ADD_TODO',
  payload: { text: 'Write documentation' }
}

// Error action
{
  type: 'ADD_TODO',
  payload: new Error('Failed to save'),
  error: true
}

See: flux-standard-action on GitHub

---

redux-multi

単一の dispatch 呼び出しで Action の配列をまとめて送信：

store.dispatch([
  { type: 'INCREMENT', payload: 1 },
  { type: 'NOTIFY', payload: 'Count updated' }
]);

---

reduce-reducers

名前空間をネストさせずに複数の Reducer を順次合成：

import reduceReducers from 'reduce-reducers';

const combined = reduceReducers(
  (state, action) => (action.type === 'ADD' ? state + action.payload : state),
  (state, action) => (action.type === 'MULTIPLY' ? state * action.payload : state)
);

---

非同期ミドルウェアと副作用処理

redux-thunk

オブジェクトの代わりに関数を返す Action Creator を記述可能にし、dispatch と getState へのアクセスを提供：

const fetchUser = (id) => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: error, error: true });
  }
};

// Dispatch like a normal action:
store.dispatch(fetchUser(42));

See: redux-thunk on GitHub

---

redux-promise

FSA 準拠の Promise ミドルウェア。payload に渡された Promise を自動解決してから Reducer へディスパッチ：

import { createAction } from 'redux-actions';

const fetchPosts = createAction('FETCH_POSTS', async () => {
  const response = await fetch('/api/posts');
  return response.json();
});

// Resolves payload promise automatically:
store.dispatch(fetchPosts());

---

redux-logger

状態遷移とディスパッチされた Action をブラウザの開発者コンソールに整形出力：

import { createLogger } from 'redux-logger';

const logger = createLogger({
  collapsed: true,
  diff: true
});

---

関連リファレンス

• Redux チートシート
• React.js チートシート