在 useEffect() Hook 中更新 Redux Store。 useSelector 返回旧信息并且 useDispatch 不更新商店

Question

我正在开发一个 React 应用程序，它显示图像并记录用户的击键。一切都工作正常，直到客户端要求在 4 秒没有用户输入后自动更改图像。

我决定在

setInterval()

反应钩子中使用

useEffect()

来实现这一点。效果很好。

但是，我无法从

useEffect()

钩子内的 Redux Store 可靠地更新甚至检索数据。

REDUX 代码：

const nBackStateDispatch = (dispatch) => ({
  newNBackState: (users) => dispatch(newNBackState(users)),
});  

const { newNBackState } = nBackStateDispatch(useDispatch());

const NBackState = useSelector(
    (state) => state.examNavigationReducer.newNBackState
  );

使用效果代码

useEffect(() => {
  const interval = setInterval(() => {
    newNBackState(NBackState)
    console.log("This will run every four seconds!");
  }, 4000);
  return () => clearInterval(interval);
}, [NBackState]);

我可以使用按钮中内置的钩子更新 redux 存储，但是

useSelector()

中的

useEffect()

钩子返回默认的 redux 存储值，而

useSelector()

外部单独组件中的

useEffect

钩子返回更新后的值。

以下是函数和存储的预期输入和输出：

输入和预期输出

Redux Store 初始状态： NBackState = 0

预期 useDispatch() 输出： NBackState++

实际 useEffect() 之外的输出 NBackState++

实际 useEffect() 内的输出 NBackState

预期 useSelector() 输出 NBackState = 1

实际 useEffect() 之外的输出 NBackState = 1

实际 useSelector() 输出 NBackState = 0

useDispatch() 之后的

Redux Store 状态： NBackState = 1

Answer 1

你的 redux 代码真的很奇怪。您正在结合操作和选择器的职责。

您应该调度一个操作来更新状态并使用

useSelector

钩子来读取状态的当前值。

它应该看起来像这样：

const MyComponent = () => {

  const nBackState = useSelector(
    (state) => state.examNavigationReducer.newNBackState
  );

  const dispatch = useDispatch();

  useEffect(() => {
    const interval = setInterval(() => {
      dispatch(incrementNBackState());
      console.log("This will run every four seconds!");
    }, 4000);
    return () => clearInterval(interval);
  }, []);

/*...*/

其中

incrementNBackState

是动作创建器功能。您的减速器将通过修改

incrementNBackState

的值来响应

newNBackState

操作。

这是一个功能演示。