代码之家 › 专栏 › 技术社区 › Shaegi

用户教育程序/使用状态更新太慢

react-hooks reactjs javascript

Shaegi · 技术社区 · 7 年前

我正试图删除我们的应用程序的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]
}

我的问题是我有一个用例,在这个用例中,我的调度函数在一个很短的时间间隔内被多次调用,并相互中继。就像一个数组,每次调度都会添加一个新项。为此,我合并最后一个状态和新状态。因为它在状态更新之前被调用,所以最后一个状态不是最后一个调用的新状态。因此,我的状态只保存最后一次调度。有没有办法解决这个问题(除了改变调用更新的方式之外,因为它们来自第三方组件)

事先谢谢。

1 回复 | 直到 7 年前

Yangshun Tay 7 年前

我无法证实这是否有效,但我怀疑会有效。你可以改变你的 setState 内部调用 dispatch 到回调窗体,该窗体允许您在将现有状态传递到reducer之前引用该状态。

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

推荐文章