使用服务器中的数据在 React Redux 应用程序中初始化状态答案

【问题标题】：Initialising State in React Redux app with data in server使用服务器中的数据在 React Redux 应用程序中初始化状态
【发布时间】：2018-04-12 04:10:34
【问题描述】：

我正在开发我的第一个 React Redux 项目。

该项目依赖于服务器来获取其数据，因此还需要调用服务器 API 来获取这些数据。

我的问题是关于初始化状态。

我可以想到两种初始化状态的方法：

1.) 首先传递一个空对象 {} 作为 Redux 存储的初始化状态，然后在 componentDidMount 内部调用 API 以访问服务器中的数据，然后更新存储的状态/应用程序。

2.) 在 Redux 应用程序的 reducer 中调用所有相关的服务器方法（例如 getCategories()、getPosts() 等），然后用所有数据组成一个对象，例如{categories: categories, posts: posts} 然后将此对象作为初始状态传递给reducer。

Redux 在处理存储在服务器中的数据时，推荐哪种方式？如果有第 3 或第 4 种方式是 Redux 方式或推荐方式，那么请分享您的知识。谢谢。

【问题讨论】：

我会推荐第一种方法，因为您可以处理错误并相应地向用户显示特定错误。而不是 'componentDidMount' 你可以使用 'componentWillMount'

标签： reactjs redux react-redux

【解决方案1】：

我处理来自后端的数据的方式，据我所知也是建议的方式，是这样的：

在 componentDidMount 方法中调用 thunk 动作创建者。您可以在this 链接中了解更多信息。
在该 thunk 动作创建器中，您首先分派一个 REQUEST 动作，然后执行 fetch 以访问后端，当响应到达时，您可以在成功或错误处理程序上处理它。根据执行的处理程序，您分派一个 SUCCESS 或一个 ERROR 操作（并将来自后端的所有相关信息附加到它，以便化简器可以访问它）。
在您的 reducer 中，您编写代码来处理上述所有操作（REQUEST、SUCCESS 和 ERROR）。每个处理程序都会转换您的状态，例如 REQUEST 可以将 isFetching 标志设置为 true，这将让您在 UI 中显示一个微调器，而 SUCCESS 可以将该标志设置为 false 并使用来自后端的数据填充状态并使用调度的动作传递给reducer。
一旦你的 reducer 更新了，你就可以从 UI 访问更新后的状态，例如使用 connect react-redux 函数。

关于初始状态，它应该代表一个默认状态。例如，它的 isFetching 标志为 false，如果您从后端获取食物列表，那么该列表在您的初始状态下可能是一个空列表。当然，这只是一个例子。您需要设置一个对您的应用有意义的初始状态。

希望对你有帮助。

【讨论】：

【解决方案2】：

第一种方式是初始化状态的更好方式。您的组件在componentDidMount 中进行必要的API 调用，并将数据作为actions 的有效负载传递给Redux，reducers 使用它来更新您的应用程序的state。

第二种方式是不可取的。根据 Redux docs：

reducer 是一个纯函数，它接受前一个状态和一个动作，并返回下一个状态。

(previousState, action) => newState

... 减速器保持纯净是非常重要的。在 reducer 中你不应该做的事情：

改变其参数；

执行 API 调用等副作用和路由转换；

调用非纯函数，例如Date.now() 或 Math.random()。

编辑：您还可以使用 thunk 中间件和 async 操作来执行 API 调用，如 Redux docs 和 @DiegoTArg 的回答中所述。

【讨论】：