Redux-CheatSheet

本文详细地阐述了 Redux 的设计理念与实践技巧，包含了其三大原则与简单的仿制、基础组件以及 React 集成使用、基于 Thunk, Promise, Sagas 三种不同的异步处理方式、Selector, Ducks 等其他常见的样式规范、中间件的实现原理与代码分析等。

Redux CheatSheet | Redux 设计理念与实践技巧清单

Redux 是受 Flux 启发的，类似于 Event Sourcing 的事件驱动型框架。

基础组件

实践工具

ducks

ducks-modular-redux 是对于 Ducks 规范的描述，其按照业务模块将 reducer, action, actionTypes 合并到单一的文件中。

// widgets.js

// Actions
const LOAD = "my-app/widgets/LOAD";
const CREATE = "my-app/widgets/CREATE";
const UPDATE = "my-app/widgets/UPDATE";
const REMOVE = "my-app/widgets/REMOVE";

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default:
      return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget() {
  return dispatch =>
    get("/widget").then(widget => dispatch(updateWidget(widget)));
}

A module…

MUST export default a function called reducer() MUST export its action creators as functions MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library

在外部使用时，我们可以导出默认的 reducer:

import { combineReducers } from "redux";
import * as reducers from "./ducks/index";

const rootReducer = combineReducers(reducers);
export default rootReducer;

在组件中，可以导出所有的 Action:

import * as widgetActions from "./ducks/widgets";

redux-actions

import { createActions, handleActions, combineActions } from "redux-actions";

const defaultState = { counter: 10 };

const { increment, decrement } = createActions({
  INCREMENT: (amount = 1) => ({ amount }),
  DECREMENT: (amount = 1) => ({ amount: -amount })
});

const reducer = handleActions(
  {
    INCREMENT: (state, action) => ({
      counter: state.counter + action.payload
    }),

    DECREMENT: (state, action) => ({
      counter: state.counter - action.payload
    })
  },
  defaultState
);

const reducer = handleActions(
  {
    [combineActions(increment, decrement)](
      state,
      {
        payload: { amount }
      }
    ) {
      return { ...state, counter: state.counter + amount };
    }
  },
  defaultState
);

export default reducer;

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import thunkMiddleware from 'redux-thunk';
import logger from 'redux-logger';

const reducer = (state = {}, action) => {
  ...
}

const store = createStore(reducer, {}, applyMiddleware(
  thunkMiddleware,
  promiseMiddleware(),
  logger,
));

export default store;

const promiseAction = () => ({
  type: "PROMISE",
  payload: Promise.resolve()
});

Async Actions | 异步 Action 处理

Thunk

Promise

redux-promise 会自动处理 payload 为 Promise 对象的 Action，并且会分发该 Action 的副本，包含了 Promise 的处理结果，并且根据处理结果动态设置了 status 属性为 success 或者 error。

// 创建简单的异步 Action
createAction("FETCH_THING", async id => {
  const result = await somePromise;
  return result.someValue;
});

// 与自定义的 WebAPI 协同使用
import { WebAPI } from "../utils/WebAPI";

export const getThing = createAction("GET_THING", WebAPI.getThing);
export const createThing = createAction("POST_THING", WebAPI.createThing);
export const updateThing = createAction("UPDATE_THING", WebAPI.updateThing);
export const deleteThing = createAction("DELETE_THING", WebAPI.deleteThing);

redux-promise-middleware 为我们提供了类似的异步处理功能，其能够接受某个 Promise，并且依次分发 Pending, Fulfilled, 以及 Rejected 这几个不同状态的 Action:

const promiseAction = () => ({
  type: "PROMISE",
  payload: Promise.resolve()
});

该工具同样可以与 Redux Thunk 协同使用，来进行多个 Action 的分发：

const secondAction = data => ({
  type: "TWO",
  payload: data
});

const first = () => {
  return dispatch => {
    const response = dispatch({
      type: "ONE",
      payload: Promise.resolve()
    });

    response.then(data => {
      dispatch(secondAction(data));
    });
  };
};

我们也可以自己实现 Promise 中间件，可以参考 redux/promiseMiddleware 的源代码实现。在实际应用中，我们往往需要等待某个操作处理结束进行刷新等附加响应；此时我们即可以创建自定义的 Thunk，也可以直接在类方法中使用 await 来等待 dispatch 函数返回的 Promise:

const { fetchThing } = bindActionCreators({ fetchThing }, dispatch);

// 这里即会在 Redux 中分发 Action，同样也会阻塞执行直至 Promise 处理完毕
await fetchThing().payload;

Sagas

Sagas 是源于计算机科学与技术的概念，用于描述事务及其关联处理操作的约束。redux-sagas 的官方描述是用于处理副作用(Side Effects)的 Redux 中间件，允许我们以同步地方式编写异步代码，并使用 try-catch 进行异常处理。

与 redux-thunk 相比，redux-sagas 并不是直接从 UI 调用逻辑代码，而是进行纯粹地 dispatch action；所有的异步流程控制都被移入到了 sagas，从而增强组件与逻辑代码的可复用性与可测试性。redux-sagas 基于 ES6 Generator，能为我们提供高级的异步控制流以及并发管理，可以使用简单的同步方式描述异步流，并通过 fork 实现并发任务。

参考 fe-boilerplate/redux 的示例，我们首先需要引入并且创建 Sagas 中间件实例：

import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/sagas';

const sagaMiddleware = createSagaMiddleware();

// 引入中间件，并构建 Store 对象
...

sagaMiddleware.run(rootSaga);

这里的 sagas 文件，即包含了具体的逻辑处理代码：

// helloSaga 会在 sagaMiddleware.run 时即刻执行
export function* helloSaga() {
  console.log("Hello Saga!");
}

// worker saga
export function* incrementAsync() {
  yield call(delay, 1000);
  // 继续分发事件
  yield put({ type: "SAGA_INCREMENT" });
}

// watcher saga
export function* watchIncrementAsync() {
  // 监听 Action，并执行关联操作
  yield takeEvery("SAGA_INCREMENT_ASYNC", incrementAsync);
}

// root saga
export default function* rootSaga() {
  yield [helloSaga(), watchIncrementAsync()];
}

Sagas 为我们定义了三种不同的 Saga，其中 Worker Saga 负责 API 调用、异步请求、结果处理等具体的任务；Watcher Saga 则监听被 dispatch 的 actions，当接收到 action 或者知道其被触发时，调用 worker saga 执行任务。而 Root Saga 则是立即启动 Sagas 的唯一入口。Saga 使用 Generator 函数来 yield Effect，其利用生成器可以暂停执行，再次执行的时候从上次暂停的地方继续执行的特性。Effect 是一个简单的对象，该对象包含了一些给 middleware 解释执行的信息。可以通过使用 effects API，如 fork，call，take，put，cancel 等来创建 Effect。

如 yield call(fetch, '/user') 即 yield 了下面的对象，call 创建了一条描述结果的信息，然后，redux-saga middleware 将确保执行这些指令并将指令的结果返回给生成器：

{
  type: CALL,
  function: fetch,
  args: ['/user']
}

我们也可以并发执行多个任务：

const [users, repos] = yield[(call(fetch, "/users"), call(fetch, "/repos"))];

同样以常见的接口请求，与结果处理为例：

import { take, fork, call, put } from "redux-saga/effects";

// The worker: perform the requested task
function* fetchUrl(url) {
  // 指示中间件调用 fetch 异步任务
  const data = yield call(fetch, url);

  // 指示中间件发起一个 action 到 Store
  yield put({ type: "FETCH_SUCCESS", data });
}

// The watcher: watch actions and coordinate worker tasks
function* watchFetchRequests() {
  while (true) {
    // 指示中间件等待 Store 上指定的 action，即监听 action
    const action = yield take("FETCH_REQUEST");

    // 指示中间件以无阻塞调用方式执行 fetchUrl
    yield fork(fetchUrl, action.url);
  }
}

样式风格

ducks

redux-actions

import { createActions, handleActions, combineActions } from "redux-actions";

const defaultState = { counter: 10 };

const { increment, decrement } = createActions({
  INCREMENT: (amount = 1) => ({ amount }),
  DECREMENT: (amount = 1) => ({ amount: -amount })
});

const reducer = handleActions(
  {
    INCREMENT: (state, action) => ({
      counter: state.counter + action.payload
    }),

    DECREMENT: (state, action) => ({
      counter: state.counter - action.payload
    })
  },
  defaultState
);

const reducer = handleActions(
  {
    [combineActions(increment, decrement)](
      state,
      {
        payload: { amount }
      }
    ) {
      return { ...state, counter: state.counter + amount };
    }
  },
  defaultState
);

export default reducer;

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import thunkMiddleware from 'redux-thunk';
import logger from 'redux-logger';

const reducer = (state = {}, action) => {
  ...
}

const store = createStore(reducer, {}, applyMiddleware(
  thunkMiddleware,
  promiseMiddleware(),
  logger,
));

export default store;

const promiseAction = () => ({
  type: "PROMISE",
  payload: Promise.resolve()
});

Middleware | 中间件

实践的思考

现代 Web 开发/状态管理

Redux 适合于需要强项目健壮度与多人协调规范的大中型团队，对于很多中小型创业性质，项目需求迭代异常快的团队则往往可能起到适得其反的作用。如果你真的喜欢 Redux，那么更应该在合适的项目，合适的阶段去接入 Redux，而不是在需求尚未成型之处就花费大量精力搭建复杂的脚手架，说不准客户的需求图纸都画反了呢。Dan 推荐的适用 Redux 的情况典型的有：

仅就笔者的个人实践而言，在

对于数据的获取

对于简单可重复的全局状态，譬如通用的接口返回的错误信息，可以使用全局的错误状态：

function reducer(state, { payload }) {
  if (payload.error) {
    return {
      ...state,
      errorMessage: payload.error.message
    };
  }
}

如果是复杂接口响应的处理，譬如创建或者更新的表单，特别是还需要包含大量的非跨组件的 UI 操作，那么不妨使用本地状态处理，当然也可以使用 Thunk 函数进行处理：

class Com extends Component {
  async handleSubmit() {
    try {
      const result = await doMutation();

      if (result.success) {
        // 执行成功之后的界面操作
        showSuccessMessage();
        fetchThing();
        closeModal();
      } else {
        // 执行失败之后的部分操作
        doFallback();
      }
    } catch (e) {
      showErrorMessage();
    }
  }
}

关键源代码

react-redux

在 Provider.js 中：

最近更新于 0001-01-01