今天早上，我的毕设来到了这样一个需求：引导用户创建一个实例，而这个引导过程会根据用户的选择而有两种不同的路径共五种状态。所以如何比较优雅地管理这些状态便成了一个重要的问题。将这五个状态以 0,1,2,3,4 来表示的话，第一条路径就是`[0,1,2,4]`第二条就是`[0,2,3,4]`（不考虑返回操作），如图： ![](https://static.yuzi.dev/picture/blog/frontend/react-reducer/msg1255133437-72430.jpg) # 牛刀小试：使用类对于状态机的需求，我第一个想到了使用一个类创建的对象来管理这些状态，话不多说就之间开干！首先使用 enum 定义一下状态： ```ts export enum Steps { StartUp, ChooseTemplate, SetInstanceConfigure, UploadZip, Finish, } ``` 随后定义一个类来操纵状态： ```ts export class StepState { private current = 0 private steps: Steps[] = [Steps.StartUp] setCreateType(createType: 'template' | 'custom') { if (createType === 'template') { this.steps.push( Steps.ChooseTemplate, Steps.SetInstanceConfigure, Steps.Finish, ) } else { this.steps.push(Steps.SetInstanceConfigure, Steps.UploadZip, Steps.Finish) } this.current = 1 } get currentStep() { return this.steps[this.current] } next() { this.current++ } } ``` 然后扔进组件里： ```tsx export default function QuickStart() { const stepState = new StepState() const currentStep = useMemo( () => stepState.currentStep, [stepState.currentStep], ) const handleSetCreateType = (type: 'template' | 'custom') => { stepState.setCreateType(type) } switch (currentStep) { case Steps.StartUp: return case Steps.ChooseTemplate: return

选择模板

case Steps.SetInstanceConfigure: return

设置实例配置

default: return

未知错误

} } ``` 然而结果是，点击了按钮后并没有反应。为什么？因为这个数据并不是**响应式**的，我们调用我们自己类的方法改变了对象的值，React 是不知道的（`useMemo`,`useEffect`的 dependencies 是只能监听响应式数据的，普通数据放进去照样监听不到），所以页面没有任何变化。所以解决方法的是转入 React 的响应式生态，才能被监听到。 # `useState`? `useImmer`? 最直接的方法是放进 useState 中，这样数据就是响应式的了，但是有一个问题是，useState 更新数据时是替换，如果我们使用解构赋值进行浅拷贝的话，类的方法就会尽数丢失。当然我们也可以用手动管理原型链的方法进行完全拷贝，但是感觉又不够优雅。这时，我想到了 React 官方教程里的库`Immer`，它类似 Vue3，使用`Proxy`来进行代理原始数据，使得我们达到可以直接‘修改’数据而保持响应式的效果。那么，我把`useImmer`套在我创建的对象中如何呢？ ```tsx const [stepState, updateStepState] = useImmer(new StepState()) ... const handleSetCreateType = (type: 'template' | 'custom') => { updateStepState((draft) => { draft.setCreateType(type) }) } ``` 然后直接来了个报错： ![](https://static.yuzi.dev/picture/blog/frontend/react-reducer/Screenshot_20231202_134159.webp) 通过报错可以看到，对于我们这种复杂的有函数的对象，Immer 也是无能为力的。 # `useReducer`和`useImmerReducer` 在`use-immer`库的介绍页，它的下方还介绍了另一个 hook：`useImmerReducer`，我一看，这用法不是和 vuex 很像吗？它写着它基于`useReducer`这个 React hook，立马翻开[官方文档](https://react.dev/reference/react/useReducer)查看。简而言之，这就是 React 提供的一个可以用于状态管理的短小精悍的 hook，而我在学习 React 时居然漏掉或者说是跳过了它！它的简单用法如下： ```tsx import { useReducer } from 'react'; function reducer(state, action) { if (action.type === 'incremented_age') { return { age: state.age + 1 }; } throw Error('Unknown action.'); } export default function Counter() { const [state, dispatch] = useReducer(reducer, { age: 42 }); return ( <>

Hello! You are {state.age}.

); } ``` reducer 是一个函数，接受两个参数 state 和 action，state 是在调用 dispatch 时自动传入，action 则是 dispatch 的参数，他的返回值即作为新的 state。但是要注意，reducer 传进来的 state 是**只读的**，正如同它的名字“切片”和 React 的不可变哲学一样，reducer 必须返回一个新的对象作为新的 state 切片！ ```ts function reducer(state, action) { if (action.type === 'incremented_age') { state.age++; } return state; //错误示例，这样什么也不会发生！数据不会变化。 throw Error('Unknown action.'); } ``` 那么上文提到的`useImmerReducer`就是来解决这个问题的，利用 Proxy，reducer 可以直接修改 state（在 immer 里叫 draft）的属性的值，而不必返回新切片（immer 帮我们做了），所以我们可以重构我们的代码如下： ```tsx export interface StepState { current: number steps: Steps[] } function stepReducer( draft: StepState, action: | { type: 'setCreateType'; payload: 'template' | 'custom' } | { type: 'next' }, ) { switch (action.type) { case 'setCreateType': if (action.payload === 'template') { draft.steps.push( Steps.ChooseTemplate, Steps.SetInstanceConfigure, Steps.Finish, ) } else { draft.steps.push( Steps.SetInstanceConfigure, Steps.UploadZip, Steps.Finish, ) } return void draft.current++ case 'next': return void draft.current++ default: throw new Error('未知类型') } } export default function QuickStart() { const [stepState, stepDispatch] = useImmerReducer(stepReducer, { current: 0, steps: [Steps.StartUp], } as StepState) const currentStep = useMemo( () => stepState.steps[stepState.current], [stepState], ) const handleSetCreateType = (type: 'template' | 'custom') => { stepDispatch({ type: 'setCreateType', payload: type }) } switch (currentStep) { case Steps.StartUp: return case Steps.ChooseTemplate: return

选择模板

case Steps.SetInstanceConfigure: return

设置实例配置

default: return

未知错误

} } ``` 这样，问题完美解决。 # 总结回顾整个问题解决的步骤，我学到了很多。首先我有把代码写得优雅而不是乱糊的意识，值得肯定。但是我在想解决思路的时候没有意识到React的响应式特性导致第一次写出了“使用类控制”的无法使用的结构。好在最后还是回到文档查找到了最合适的解决方案，这个切片的思想值得我牢记！

在React中使用简单的状态管理

在React中使用简单的状态管理