更新 state 时反应 @redux/toolkit 不重新渲染组件

Question

问题：当我更新商店的 state 时，组件不会重新渲染。 在上面的示例中，您可以从控制台看到数据已正确获取，但组件没有重新渲染并继续渲染只是Loading... 。

预期行为：当我更新 state 时，组件被重新渲染。

我通过在组件中使用 useState 并订阅存储更改找到了一种解决方法，例如：

store.subscribe(() => setComponentState(store.getData())

这基本上会在每次更新数据时强制重新渲染。

I can mutate state : In the official docs they say that you can mutate the state since it has some magic that allows to do so ( https://redux-toolkit.js.org/usage/usage-guide#simplifying-reducers- with-createreducer ），因此这不是问题。

任何人都知道什么是使它工作的适当方法？

Answer 1

从useStore docs ，它指出钩子不应该在应用程序中使用，因为它不会导致组件重新渲染：

// 仅示例。 不要在真正的应用程序中执行此操作。

// 如果存储区 state 发生变化，组件不会自动更新

相反，您应该改用useSelector 。

在那一点上，您如何拥有您的代码框示例将导致自dispatch(fetchData()); 每次更新 redux state 时都会调用。 相反，您需要将它放在React.useEffect中。

例如，将useSelector与useEffect一起使用：

Answer 2

您不应该使用 useStore 挂钩。 您应该使用订阅商店更新的 useSelector 钩子：