Redux：如何在另一个值更改时更新一个值？

Posted 2023-02-22

【中文标题】Redux：如何在另一个值更改时更新一个值？

【英文标题】：Redux: How to update one value upon another changing?

【发布时间】：2021-03-19 03:22:11

【问题描述】：

我的 React Native 应用处理 5 个数据实体。当应用程序启动时，我会显示一个加载屏幕并向 REST 后端发送 HTTP 请求，每个实体一个。当收到所有响应并完成数据加载后，我会从加载屏幕导航到实际应用。

我在 redux RTK 存储中创建了一个 Download 切片，带有 isLoadingEntity01 ... isLoadingEntity05 标志和初始 null 值；我在触发 HTTP 请求之前将它们设置为true，并在收到响应时将它们设置为false。

注意：我知道这是一种相当原始的方法；我也知道createAsyncThunk（我还没有使用，那是另一天）；以上几点仅用于说明上下文。

HTTP 响应显然是以任意顺序接收的。一些loadingIsComplete 标志的设置仍然是微不足道的：每当收到响应并设置isLoadingEntity 之一时，检查它们全部五个，如果它们都是true，则设置loadingIsComplete。

问题是：在哪里/如何做到这一点？

我的第一个想法是在每个 reducer 函数中实现这一点（并且，为了防止代码重复，将其封装在一个单独的函数中）。但是reducer functions should be pure 和将loadingIsComplete 设置给我显然是有副作用的——尤其是考虑到接收响应的任意顺序。

我的第二个想法是创建一个中间件（我刚刚成功地将其用于其他目的，请参阅this question）。我认为这可行，但 IMO 我的问题应该很常见——我自己已经多次遇到这个问题，有时在同一个切片中，有时在商店的多个切片中——我有一种唠叨的感觉我错过了一些主要的 redux 概念。

我查看了redux-thunk，由 RTK 添加为one of the default middleware（这给我的印象是每个人都在使用它，所以我也应该这样做）； “thunk 是 Redux 的基本推荐的副作用中间件”听起来像是我的回答——但文档似乎主要关注异步逻辑——在我上面描述的情况下没有任何异步，这只是第二次更新在之前更新到另一个值时达到某个值。

redux-thunk 仍然是用于这种目的的合适工具吗？

我的问题什么是规范的 Redux / RTK 方法来设置另一个值的变化？

PS：很明显，我在问这里之前做了研究，但大多数 SO 问题和这个方向的博客文章似乎都围绕着表单。

【问题讨论】：

不确定您所说的“在另一个更改时设置一个值”是什么意思，通常在 React 中，答案是“不要”。除此之外，听起来您只需要 5 个动作创建者，每个动作创建者都会在成功后进入商店。在渲染等待屏幕以外的其他内容之前，您的应用将等待所有 5 个数据集都被填充

【参考方案1】：

干净简洁

我不明白为什么你有 5 个“isLoadingEntity”。

但是你可以写类似的东西

const loadingIsComplete = isLoadingEntity01 && isLoadingEntity02 && ...

如果 "loadingIsComplete" True 使用 useMemo 包装它并渲染您的应用程序，则保留加载器。

您在哪里调用 HTTP 请求？我们可以看看一些代码吗？

简而言之，redux-thunk 只是统一了你所有的 reducer，所以你将拥有一个商店。 对于 redux-thunk，您可以查看我的开源项目：

(https://github.com/omergal99/hello-corona/blob/master/src/store/AppStore.js)

关于更新商店中的一个值 - 我没有真正明白你的问题

但我可以告诉您，您可以在应用程序中的任何位置更新任何商店，您可以在 reducerY 更新后写入更新 reducerX。这取决于您的数据结构。

希望我能帮到你，欢迎你添加代码或尖锐你的问题:)