在 Redux 中更改 props 但不更改状态的 API 调用应该放在哪里?
Posted
技术标签:
【中文标题】在 Redux 中更改 props 但不更改状态的 API 调用应该放在哪里?【英文标题】:Where to put API Calls in Redux that change props but not state? 【发布时间】:2018-12-12 22:58:20 【问题描述】:我正在调用 API 端点来填充具有大量行的表。用户可以单击一行,然后被重定向到他们可以编辑元素的页面。他们永远不能编辑表格本身的任何内容。它们总是被重定向到一个单独的页面。
我对此想了很多,并相信这不是状态。它不能改变。对吧?
问题:在 Redux 应用程序中,我应该在哪里从我的 API 获取数据并将结果作为 props 传递到表中?我还会在Redux action
中这样做吗?这似乎是错误的,因为我的操作根本不会修改状态:我返回的数据只会静态显示。 但是:如果不在Redux action
中,还能在哪里?在组件本身?我也不确定,因为在操作文件夹/文件中包含应用程序的所有操作似乎很不错。
你会推荐什么?
PS:人们也可以争辩说表格中的元素是状态,因为它们只是在单独的页面上被修改(从不在表格本身中)。但是我必须为此获取的数据会非常大,并且用户一次只能使用该表的一个元素,所以这似乎只是将 Redux 误用作数据库。将当前单击的项目作为状态似乎更有意义,并从服务器获取一个轻量级列表,该列表仅填充表,但不包含任何其他嵌套数据(我总是可以随时抓取用户选择他/她要编辑的项目)这看起来对吗?
【问题讨论】:
【参考方案1】:如果您不想从状态访问结果数据:
-
使用 redux 操作调用 api
在 reducer 中获取数据(并根据需要进行过滤)
将结果数据放到 redux 主存储中
在 react 组件中直接用
this.props.<result_data_name>
使用结果数据。
如果你想将这些数据传递给子组件,仍然只使用 props,因为表是只读的,你不需要在 react 状态存储任何东西。
这样,你不需要将 props 数据放入 state 中即可使用。直接使用 props 本身的数据即可。
【讨论】:
【参考方案2】:您可以在 redux 操作中调用您的 API 端点,然后将有效负载中的响应传递给减速器,该减速器将从您的 APi 返回的数据放入状态。
【讨论】:
那将是标准的 Redux 流程,不是吗?我的问题正是如果我不想将我的 API 数据放入状态该怎么办。【参考方案3】:您可以将应用的状态与 Redux 和 React 的本地状态混合使用。这没有错。这取决于您如何设置应用程序的逻辑。例如,对于您的情况,如果除此组件之外的其他任何地方都不需要这些获取的数据,您可以将这些数据保存在组件的状态中。
您的组件将获取数据,保存状态,然后将相关道具传递给子组件(数据将在其中编辑),您将在那里完成其余的工作。也没有其他组件需要这些数据。如果这是在您的组件中保持状态的情况,对我(作为学习者)来说似乎是合乎逻辑的。
【讨论】:
所以你建议我简单地在组件中获取它?我不明白你为什么说组件应该将数据保存为状态,但据我了解,因为我没有修改数据,所以数据不应该进入状态,而只是道具。你怎么看? 你在哪里看到“如果数据不会改变,那么它不应该进入状态”?你可以在你的状态下持有任何东西,无论它是否被改变。如果您不在此组件中获取数据,而是更喜欢将其作为道具获取,那么您打算在哪里获取这些数据?肯定在父组件中,那么在不使用任何状态的情况下,您打算如何将此数据作为道具传递?我可能会以某种方式错误地阅读您的问题。我明白无论您是想使用 Redux 还是 React 的状态作为混合。我就是这样回答的。 是的,这不是我要问的。我知道严格来说我可以将任何我想要的状态放入状态,但我理解状态的方式是您通常应该遵守状态应该只保存应用程序运行期间可能发生变化的原则。 (让我知道那是否错了,我只是一个初学者)。但是:您所说的基本上是,在某些时候或其他时候数据应该处于状态,然后才作为道具传递给子组件?我会直接获取它并直接传递它,而不是先将它保存在父组件状态。 到目前为止,我还没有看到像您这样的建议。无论是否会发生变化,我都使用状态来保存我的组件数据。然后,最好从您的应用程序中添加一些样板代码。因此,人们可以查看使用您的方法是否可能存在一些问题或根本没有问题。我的意思是不使用状态直接获取数据并将其作为道具传递。以上是关于在 Redux 中更改 props 但不更改状态的 API 调用应该放在哪里?的主要内容,如果未能解决你的问题,请参考以下文章
REACT + REDUX:在redux状态更改mapStateToProps更新状态但视图不按照新状态呈现
React-native 和 Redux 健康的方式来调用 props 更改的操作