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

5 个月前
/
27

今天早上，我的毕设来到了这样一个需求：引导用户创建一个实例，而这个引导过程会根据用户的选择而有两种不同的路径共五种状态。所以如何比较优雅地管理这些状态便成了一个重要的问题。
将这五个状态以 0,1,2,3,4 来表示的话，第一条路径就是[0,1,2,4]第二条就是[0,2,3,4]（不考虑返回操作），如图：

牛刀小试：使用类

对于状态机的需求，我第一个想到了使用一个类创建的对象来管理这些状态，话不多说就之间开干！
首先使用 enum 定义一下状态：

export enum Steps {
  StartUp,
  ChooseTemplate,
  SetInstanceConfigure,
  UploadZip,
  Finish,
}

随后定义一个类来操纵状态：

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++
  }
}

然后扔进组件里：

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 <StartUp handleSetCreateType={handleSetCreateType} />
    case Steps.ChooseTemplate:
      return <div>选择模板</div>
    case Steps.SetInstanceConfigure:
      return <div>设置实例配置</div>
    default:
      return <div>未知错误</div>
  }
}

然而结果是，点击了按钮后并没有反应。

为什么？因为这个数据并不是响应式的，我们调用我们自己类的方法改变了对象的值，React 是不知道的（useMemo,useEffect的 dependencies 是只能监听响应式数据的，普通数据放进去照样监听不到），所以页面没有任何变化。

所以解决方法的是转入 React 的响应式生态，才能被监听到。

useState? useImmer?

最直接的方法是放进 useState 中，这样数据就是响应式的了，但是有一个问题是，useState 更新数据时是替换，如果我们使用解构赋值进行浅拷贝的话，类的方法就会尽数丢失。当然我们也可以用手动管理原型链的方法进行完全拷贝，但是感觉又不够优雅。

这时，我想到了 React 官方教程里的库Immer，它类似 Vue3，使用Proxy来进行代理原始数据，使得我们达到可以直接‘修改’数据而保持响应式的效果。那么，我把useImmer套在我创建的对象中如何呢？

const [stepState, updateStepState] = useImmer(new StepState())
...
const handleSetCreateType = (type: 'template' | 'custom') => {
  updateStepState((draft) => {
    draft.setCreateType(type)
  })
}

然后直接来了个报错：

通过报错可以看到，对于我们这种复杂的有函数的对象，Immer 也是无能为力的。

useReducer和useImmerReducer

在use-immer库的介绍页，它的下方还介绍了另一个 hook：useImmerReducer，我一看，这用法不是和 vuex 很像吗？它写着它基于useReducer这个 React hook，立马翻开官方文档查看。

简而言之，这就是 React 提供的一个可以用于状态管理的短小精悍的 hook，而我在学习 React 时居然漏掉或者说是跳过了它！
它的简单用法如下：

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 (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

reducer 是一个函数，接受两个参数 state 和 action，state 是在调用 dispatch 时自动传入，action 则是 dispatch 的参数，他的返回值即作为新的 state。

但是要注意，reducer 传进来的 state 是只读的，正如同它的名字“切片”和 React 的不可变哲学一样，reducer 必须返回一个新的对象作为新的 state 切片！

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    state.age++;
  }
  return state;      //错误示例，这样什么也不会发生！数据不会变化。
  throw Error('Unknown action.');
}

那么上文提到的useImmerReducer就是来解决这个问题的，利用 Proxy，reducer 可以直接修改 state（在 immer 里叫 draft）的属性的值，而不必返回新切片（immer 帮我们做了），所以我们可以重构我们的代码如下：

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 <StartUp handleSetCreateType={handleSetCreateType} />
    case Steps.ChooseTemplate:
      return <div>选择模板</div>
    case Steps.SetInstanceConfigure:
      return <div>设置实例配置</div>
    default:
      return <div>未知错误</div>
  }
}

这样，问题完美解决。

总结

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

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...