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

是时候向 Redux 说再见了

先上代码和在线执行链接，下面的代码注释中有一些解释
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())
          });