在实际使用中，useContext和useReducer是可以实现类似Redux的效果，并且一些简单的个人项目，完全可以用下面的方案代替 Redux，这种做法要比 Redux 简单一些。因为useContext和useReducer在我之前的文章中已经学习过了，所以我们把精力就放在如何模拟出Redux的效果。如果你目前还没掌握基本的语法，可以再复习一下前面两篇文章的知识点。
理论上的可行性
我们先从理论层面看看替代Redux的可能性，其实如果你对两个函数有所了解，只要我们巧妙的结合，这种替代方案是完全可行的。
useContext：可访问全局状态，避免一层层的传递状态。这符合Redux其中的一项规则，就是状态全局化，并能统一管理。useReducer：通过 action 的传递，更新复杂逻辑的状态，主要是可以实现类似Redux中的Reducer部分，实现业务逻辑的可行性。
经过我们在理论上的分析是完全可行的，接下来我们就用一个简单实例来看一下具体的实现方法。那我们先实现useContext部分（也就是状态共享），再继续实现useReducer部分（控制业务逻辑）。
先看一下今天的案例效果：
上面我们用useContext实现了 Redux 状态共享的能力，这节课看一下如何使用useReducer来实现业务逻辑的控制。
在 color.js 中添加 Reducer
颜色（state）管理的代码我们都放在了color.js中，所以在文件里添加一个 reducer，用于处理颜色更新的逻辑。先声明一个 reducer 的函数，它就是 JavaScript 中的普通函数，在讲useReducer的时候已经详细讲过了。有了 reducer 后，在 Color 组件里使用useReducer,这样 Color 组件就有了那个共享状态和处理业务逻辑的能力，跟以前使用的Redux几乎一样了。之后修改一下共享状态。我们来看代码：
import React, { createContext,useReducer } from 'react';
export const ColorContext = createContext({})
export const UPDATE_COLOR = "UPDATE_COLOR"
const reducer= (state,action)=>{
switch(action.type){
case UPDATE_COLOR:
return action.color
default:
return state
}
}
export const Color = props=>{
const [color,dispatch]=useReducer(reducer,'red')
return (
<ColorContext.Provider value={{color,dispatch}}>
{props.children}
</ColorContext.Provider>
)
}
注意，这时候我们共享出去的状态变成了 color 和 dispatch,如果不共享出去 dispatch，你是没办法完成按钮的相应事件的。
通过 dispatch 修改状态
目前程序已经有了处理共享状态的业务逻辑能力，接下来就可以在Buttons.js使用dispatch来完成按钮的相应操作了。先引入useContext、ColorContext和UPDATE_COLOR，然后写onClick事件就可以了。代码如下:
import React ,{useContext} from 'react';
import {ColorContext,UPDATE_COLOR} from './color'
function Buttons(){
const { dispatch } = useContext(ColorContext)
return (
<div>
<button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"blue"})}}>蓝色</button>
<button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黄色</button>
</div>
)
}
export default Buttons
这样代码就编写完成了，用useContext和useReducer实现了 Redux 的效果，这个代码编写过程比 Redux 要简单，但是也是有一定难度的。希望第一次接触的小伙伴能自己动手写 5 遍以上，把这种模式掌握好，因为在工作中经常用到。