在reactivejs / redux app中设置defaul状态

Question

在我当前的 ReactJS 组件中，我必须调用REST API并获取JSON。它在 componentWillMount 中完成。

我在我的应用中引入了 Redux 。我现在应该在哪里调用JSON并将其设置为默认状态？是在 Redux 还是我的 React 应用程序？

任何赞赏的例子。

Answer 1

您通常希望从componentDidMount（或Will发送操作，具体取决于您的生命周期限制）。该操作将启动XHR并通常返回thunk（redux-thunk）或promise（redux-promise-middleware）。如果是thunk，它将被设置为使用结果调度另一个动作，或者使用它为您执行的承诺，然后按照正常情况减少该状态并将其绑定到组件。

Answer 2

通常的做法是使用configureStore.js文件导出处理商店设置的configureStore()函数（初始状态，中间件和增强程序）并返回商店。有关此示例，请参阅"real-world" example in the redux repo。

在您的情况下，一种简单的方法是在您的应用启动时从REST API请求数据，然后在收到回复时，请致电configureStore(initialState)（其中initialState是数据你获取了）然后继续应用程序设置和初始渲染的其余部分。这种方法会为您的应用启动添加一些时间，因为它的初始化将在等待API响应时暂停。

另一个选择是正常创建商店（没有必备的API提取），然后在创建商店后从API发出实际的初始状态请求。收到API响应后，您可以调度INITIAL_STATE操作，并让Reducer准备好处理它。在这种方法中，您可能希望在初始提取期间使用某种加载指示器，因为您的应用程序将在API请求期间呈现或至少开始呈现。

如果您正在进行服务器呈现，则只需从服务器端获取初始状态数据，然后将其附加到您要呈现的index.html的window对象。有关此示例，请参阅"universal" example in the redux repo。这样就可以让您grab your initial state from the window object when you create your store。