Awesome Reduxcheatsheet

贡献者：BAI

redux-actions

创建一个符合 Flux standard action 格式的 Action

JS
increment = createAction("INCREMENT", (amount) => amount);
increment = createAction("INCREMENT"); // 功能同上

JS
increment(42) === { type: "INCREMENT", payload: 42 };

JS
// 错误处理
err = new Error();
increment(err) === { type: "INCREMENT", payload: err, error: true };

redux-actions

flux-standard-action

一种标准的 Flux 格式，Action 可能包含 error、payload、meta 属性

JS
{ type: 'ADD_TODO', payload: { text: 'Work it' } }
{ type: 'ADD_TODO', payload: new Error(), error: true }

flux-standard-action

reduce-reducers

组合多个 Reducer 成一个

JS
re = reduceReducers(
  (state, action) => state + action.number,
  (state, action) => state + action.number
);
re(10, { number: 2 }); //=> 14

reduce-reducers

redux-logger

Redux 日志工具

JS
// Nothing to see here

redux-logger

Async

redux-promise

Action 接收 Promise 参数

JS
increment = createAction("INCREMENT"); // redux-actions
increment(Promise.resolve(42));

redux-promise

redux-effects

可以在 Action 上增加一些附加功能，来保证 Action 更干净

JS
{
  type: 'EFFECT_COMPOSE',
  payload: {
    type: 'FETCH'
    payload: {url: '/some/thing', method: 'GET'}
  },
  meta: {
    steps: [ [success, failure] ]
  }
}

redux-effects

redux-thunk

Action 接收 Thunks 函数，和 redux-promise 类似

JS
fetchData = (url) => (dispatch, getState) => {
  dispatch({ type: 'FETCH_REQUEST' })
  fetch(url)
    .then((data) => dispatch({ type: 'FETCH_DONE', data })
    .catch((error) => dispatch({ type: 'FETCH_ERROR', error })
})
store.dispatch(fetchData('/posts'))

JS
// 也可以简写成
fetchData("/posts")(store.dispatch, store.getState);

JS
// 因为 fetchData 返回 Promise 所以可以用下面形式来做 SSR
store.dispatch(fetchPosts()).then(() => {
  ReactDOMServer.renderToString(<MyApp store={store} />);
});

redux-thunk