在 React Native 中进行 API 调用之前如何正确处理保存 redux 状态？答案

【问题标题】：How to properly handle saving redux state before making an API call in React Native?在 React Native 中进行 API 调用之前如何正确处理保存 redux 状态？
【发布时间】：2018-06-12 13:31:35
【问题描述】：

所以我认为我正确理解了流程，但希望得到一些反馈。

我正在构建一个 React Native 应用程序，它有一个用户填写并提交的多页表单。按下提交按钮后，我想将最后一页的表单数据保存到我的 Redux 状态，然后再使用所有表单数据进行 API 调用。

目前这是我设置的流程：

RN 组件按钮按下调用 SetState 以显示对话框并阻止 UI。
调度操作以使用表单数据更新 Redux。
状态更新并使用新保存的表单数据调用 ComponentWillReceiveProps。
调度操作以启动 API 调用。
处理并保存对 Redux 的响应。
状态更新并使用 API 响应再次调用 ComponentWillReceiveProps。
如果出错，显示错误消息对话框，如果成功则导航到初始屏幕并显示成功消息。

我按原样工作，但想知道这是否是正确的处理流程，还是这里有更好的首选解决方案/模式？

【问题讨论】：

标签： react-native redux

【解决方案1】：

Max 有一个很好的流程，另一种常见的方法是在用户输入时（在每个单独的输入字段中）始终将所有表单值存储在状态中。然后状态随时可以使用，即使不完整。流程如下：

用户在任何字段中输入 -> 该字段的动作创建者 -> 动作 -> 减速器保存到存储（按钮减速器可以触发您正在寻找的 api 调度与 redux thunk 异步）-> 随时可用的状态通过 mapStateToProps。

【讨论】：

嗯，我想这可能是我正在寻找的，并且在提交流程中更简洁一些。我猜动作会在每个输入字段的 onChangeText 函数中分派？
没错！您为每个输入创建一个辅助方法，然后在每个输入的 onChangeText 中调用它们。

【解决方案2】：

我认为这是一种合理的方式，并且在 redux 用户中很常见。

对于每个请求，我都喜欢有三组操作。 REQUEST 之类的东西会通过我需要的任何状态更改来减少 redux 存储，REQUEST_SUCCESS 然后将使用来自服务器的数据更新存储，以及 REQUEST_ERROR 如果有错误。

【讨论】：

我确实使用这些确切的操作来满足我的请求。让我质疑我的流程的事情是在我的状态和组件之间来回多次，我必须检查以确保我按顺序调用所有内容。考虑到它们的生命周期以及 Redux 的关系，这似乎是 React 的方式，但我对 React 和 Redux 的世界还是很陌生。