很多人說 Redux 代碼多，開發(fā)效率低。其實(shí) Redux 是可以靈活使用以及拓展的，經(jīng)過充分定制的 Redux 其實(shí)寫不了幾行代碼。今天先介紹一個(gè)很好用的 Redux 拓展—— redux-amrc。它可以幫助我們使用更少的樣板代碼發(fā)起異步 action。

低效的過去

一般情況下，為了清楚地記錄異步的過程，我們需要使用 三個(gè) action 來記錄狀態(tài)變化。通常，我們的代碼會(huì)是這樣：

const LOAD = 'redux-example/auth/LOAD';const LOAD_SUCCESS = 'redux-example/auth/LOAD_SUCCESS';const LOAD_FAIL = 'redux-example/auth/LOAD_FAIL';

寫完這么多 action，還要在異步的前后發(fā)起它們，當(dāng)然這時(shí)你可能會(huì)用中間件，所以你的代碼最少也會(huì)是這樣：

export function load() {
  return {
    types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
    promise: (client) => client.get('/loadAuth')  };}

發(fā)起 action 后，還要編寫 reducer 來處理這些 action，以改變狀態(tài)：

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case LOAD:
      return {
        ...state,
        loading: true
      };
    case LOAD_SUCCESS:
      return {
        ...state,
        loading: false,
        loaded: true,
        user: action.result
      };
    case LOAD_FAIL:
      return {
        ...state,
        loading: false,
        loaded: false,
        error: action.error
    default:
      return state;
  }}

這太痛苦了，不就是發(fā)起一個(gè)異步嗎？非要讓我寫這么多代碼？

其實(shí)，上述過程是可以簡化的。記得有篇文章叫《超過90秒的任務(wù)不自動(dòng)化，你好意思說自己是黑客？》，前端工程師也應(yīng)該具有黑客精神，接下來就讓我們使用 redux-amrc 將上述過程簡化。

輕松的現(xiàn)在

使用了 redux-amrc 后，再也不用寫這么多action了，甚至連處理這些action的reducer 都不用寫，你只需要把異步以 Promise 的形式傳給 redux-amrc 就行了：

import { ASYNC } from 'redux-amrc';/** * 這個(gè)action創(chuàng)建函數(shù)可以幫你自動(dòng)發(fā)起 LOAD 和 LOAD_SUCCESS, * state.async.[key] 將會(huì)變?yōu)?nbsp;'success' */function success() {
  return {
    [ASYNC]: {
      key: 'key',
      promise: () => Promise.resolve('success')    }
  }}/** * 這個(gè)action創(chuàng)建函數(shù)可以幫你自動(dòng)發(fā)起 LOAD 和 LOAD_FAIL, * state.async.loadState.[key].error 將會(huì)變?yōu)?nbsp;'fail' */function fail() {
  return {
    [ASYNC]: {
      key: 'key',
      promise: () => Promise.reject('fail')    }
  }}

沒有 action，沒有 reducer，就是這么清爽！當(dāng)然，在享受這一切之前，你需要進(jìn)行簡單的配置。更詳細(xì)的用法，請(qǐng)參考 redux-amrc 的官網(wǎng)文檔。

另外，附一張使用 redux-amrc 的程序截圖，那些 LOAD、LOAD_SUCCESS、LOAD_FAIL 就是 redux-amrc 幫你自動(dòng)生成的！