如何链接 React Context 调度？ （挂钩）

Question

我想要做的是订阅一个调度，然后调度到另一个状态。我试过 useEffect 但它给了我无限循环和一些谷歌搜索说不更新 useEffect 的状态所以现在我的代码看起来像这样，但它没有按预期工作。

const Chain = () => {
  const [fooState, fooDispatch] = fooOne() // useReducer
  const [barState, barDispatch] = barTwo() // useReducer

  const btnOnClick = () => {
    fooDispatch({ type: "UPDATE_FOO" })

    // Update barState base on the new value of foo, doesn't work. 
    // Foo is not yet updated.
    if (fooState.value == 'new value') {
      barDispatch({ type: "UPDATE_BAR" }) 
    }
    // fooState gets updated after this function block.
  }

  return <Button label="Button" onClick={btnOnClick} />
}

export default Chain

我的 useReducer 代码如下所示： https://kentcdodds.com/blog/how-to-use-react-context-effectively

在线if (fooState.value == 'new value') {，React 仍然没有更新值，所以我不能进入 if 块。

Answer 1

我认为您应该使用useEffect 来保持 2 个减速器挂钩同步。

挂钩can be optimized 仅在某些值更改时执行。 在你的情况下，当fooState.value（或者fooState，如果你不想太严格的话）。

类似：

React.useEffect(() => {
  if (fooState.value == 'new value') {
    barDispatch({ type: "UPDATE_BAR" }) 
  }
}, [fooState.value]);

应该得到你想要的行为 - 也从 btnOnClick 中删除 barDispatch

执行顺序应该是这样的：

1. 用户点击按钮，你调用fooDispatch
2. (foo)dispatch 更改了fooState 值，触发组件重新渲染
3. 当fooState 更改并调用barDispatch 时，使用useEffect 采取行动

如果fooOne 和barTwo 经常一起使用，那么您应该将它们组合在一个reducer hook 中。

我不知道您为什么不应该在useEffect 中设置状态（或其他挂钩）。这有点棘手，因为您可能会遇到无限循环，但在某些情况下您需要这样做。

我希望这会有所帮助！

Answer 2

对dispatch 的调用是异步的，因此在下一次重新渲染之前您无法读取状态。

如果有意义的话，你还应该发送一个动作来说明发生了什么，而不是你想要发生什么。你的 reducer 应该在概念上对刚刚发生的用户交互或其他事件做出反应。这就是为什么它被称为 React。

所以这意味着你应该调度BTN_CLICKED而不是调度UPDATE_FOO，然后FOO和BAR减速器都应该监听这个动作并决定它们是否需要更新。