使用 React 自带的 useReducer 和 useContext 来实现 Redux（包含异步 action 的解决方案）

注意：每次 Store 的变更都会对所有引入 Context 的组件造成一次渲染计算，所以在 Store 树很复杂或变更很频繁的情况下不推荐使用此方案。建议拆分成多个 Context。

2019年5月更新
发布了 @minax/redux-hooks

先上代码和在线执行链接，下面的代码注释中有一些解释
CodeSandbox在线执行地址

import React, { createContext, useContext, useReducer } from "react";
import ReactDOM from "react-dom";
// 这里我都写在一个文件里面了，实际项目中，Context肯定单独抽象出来
// 所有用到的地方再import进来
const Context = createContext();
// 这里A组件也是，实际项目中肯定不在一个文件里面
const A = () => {
  // 使用优秀的useContext来获取到Context的值
  const { dispatch, state } = useContext(Context);
  return (
      <button
        // 如果loading为true，那么禁用button，避免重复点击
        disabled={state.loading}
        onClick={() => {
          // 触发异步action，注意payload里面是一个异步获取方法
          dispatch({
            type: "click_async",
            payload: asyncFetch(new Date().getTime())
        click async
      </button>
      <button
        disabled={state.loading}
        onClick={() => {
          // 触发同步action
          dispatch({
            type: "click_sync",
            payload: new Date().getTime()
        click sync
      </button>
      <pre>{JSON.stringify(state, null, 2)}</pre>
// reducer方法也是，应该有单独的文件去维护
function reducer(state, action) {
  switch (action.type) {
    case "click_async":
    case "click_sync":
      return { ...state, value: action.payload };
    case "loading_start":
      return { ...state, loading: true };
    case "loading_end":
      return { ...state, loading: false };
    default:
      throw new Error();
function isPromise(obj) {
  return (
    !!obj &&
    (typeof obj === "object" || typeof obj === "function") &&
    typeof obj.then === "function"
// 这里是mock了一个异步方法，1秒后才会返回结果，模拟请求数据
async function asyncFetch(p) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(p);
    }, 1000);
// 这里对dispatch函数进行一个封装，使其支持处理异步action
// 简而言之就是判断传进来的action是不是Promise对象，如果是的话
// 先执行loading_start，将loading置为true
// 然后执行完成Promise后，将获得的结果执行一次action
// 再执行loading_end（实际项目中请求失败也应该执行loading_end，因项目而异，不展开了）
// 注意：这个loading是我项目中喜欢用的一个标志位，用来记录当前是不是处于请求中
// 因为经常需要有如果在请求中，按钮需要禁用，防止用户再点击这种需求
// 另外实际项目中,loading可以扩展成对象，记录各种异步请求的状态
// 这个灵感来源于dva-loading，感谢！
function wrapperDispatch(dispatch) {
  return function(action) {
    if (isPromise(action.payload)) {
      dispatch({ type: "loading_start" });
      action.payload.then(v => {
        dispatch({ type: action.type, payload: v });
        dispatch({ type: "loading_end" });
    } else {
      dispatch(action);
function App() {
  // 这里通过优秀的useReducer来实现Redux
  const [state, dispatch] = useReducer(reducer, { value: 0, loading: false });
  return (
      {/* 这里把state和包装过的dispatch绑定到Context上去，便于全局获取使用 */}
      <Context.Provider value={{ state, dispatch: wrapperDispatch(dispatch) }}>
      </Context.Provider>
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
点击click async，按钮进入禁用状态，loading为true，正在获取数据