Question

我正在尝试删除我们应用程序的redux。为此，我尝试使用新的React Hooks API。

我编写了自己的钩子，该钩子是useReducer函数的扩展，用于在每次更新时保持状态。

export default (reducer, persistKey, onRehydrate) => {
  let initialState = rehydrate(persistKey)
  if (onRehydrate && typeof onRehydrate === 'function') {
    initialState = onRehydrate(initialState)
  }
  const [state, setState] = useState(initialState)

  function dispatch (action) {
    const nextState = reducer(state, action)
    setState(nextState)
    persist(nextState, persistKey)
  }

  return [state, dispatch]
}

我的问题是我有一个用例，其中我的调度函数在很短的间隔内被多次调用，并且彼此之间相互中继。就像一个数组，总是在每次调度中添加一个新项。为此，我合并了最后一个状态和新状态。由于在状态更新之前被调用，所以最后一个状态不是最后一次调用的新状态。因此，我的状态仅保存上一次发送。有什么方法可以解决（除了更改更新的调用方式，因为它们来自第三方组件）

先谢谢了。

Answer 1

我无法验证这是否有效，但我怀疑会成功。您可以将setState中的dispatch调用更改为回调形式，这使您可以在将现有状态传递到化简器之前先对其进行引用。

export default (reducer, persistKey, onRehydrate) => {
  let initialState = rehydrate(persistKey)
  if (onRehydrate && typeof onRehydrate === 'function') {
    initialState = onRehydrate(initialState)
  }
  const [state, setState] = useState(initialState)

  function dispatch (action) {
    setState(prevState => { // Use callback form here.
      const nextState = reducer(prevState, action)
      persist(nextState, persistKey)
      return nextState
    });
  }

  return [state, dispatch]
}

useReducer / useState更新太慢

1 个答案: