redux-effect

npm install --save redux-effect

經過redux中間件的方式使async方法能夠在redux中使用。

若是你使用redux-saga，應該很是容易上手redux-effect。effect概念正是來自於saga，其自己就是一個普通的async函數，你能夠在此處理一些異步邏輯，管理reducer。

首先咱們定義一個簡易的reducer，沒有特殊需求的話，reducer只作一件事，就是將action中的參數保存起來，很簡單有木有。

function commonReducer(state = {}, action) {
  switch (action.type) {
      case 'common/save':
        return {
          ...state,
          ...action.payload,
        };
      default:
          return state;
  }
}

接着定義一個簡陋的effect方法，用於從服務端獲取一些數據，並將其存入reducer。

• effect是一個普通的async方法。
• 每一個effect的第一個參數就是action，我通常將參數放在payload中。
• effect的第二個參數是store對象，能夠拿到dispatch和getState。
• dispatch一個新的action，能夠觸發reducer，或者發起另外一個effect。
• getState則用於獲取任意reducer已有的數據。

async function test ({ payload }, { dispatch, getState }) {
  const data = await fetch()
  await dispatch({ type: 'common/save', payload: data })
}

定義好reducer和effect，就能夠設置store了，參考代碼以下：

import effect from 'redux-effect';

const effects = {
  'common/test': test
}

export const store = (initialState = {}) => {
  const temp = createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(effect(effects))),
  );
  return temp;
};

而後就能夠愉快的使用dispatch一個action來完成異步操做啦。

const { dispatch } = this.props;
dispatch({
 type: 'user/getUserInfo',
});

Keywords

• redux
• async/await
• saga
• effect