在 reactivejs/redux 应用中设置默认状态

Setting defaul state in a reactivejs/redux app

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

我在我的应用程序中引入了 Redux。我现在应该在哪里拨打电话以获取 JSON 并设置为默认状态?它是在 Redux 还是我的 React 应用程序中?

任何例子表示赞赏。

您通常希望从 componentDidMount(或 Will 派发一个动作,具体取决于您的生命周期限制)。该操作将启动 XHR,通常 return thunk (redux-thunk) 或 promise (redux-promise-middleware)。如果是 thunk,它将被设置为使用结果分派另一个操作,或者承诺它会为您执行此操作,然后按正常方式减少该状态并将其绑定到组件。

一个常见的做法是有一个 configureStore.js 文件导出一个 configureStore() 函数来处理商店设置(初始状态、中间件和增强器)和 returns 您的商店。有关此示例,请参阅 "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 for an example of this. That'll allow you to simply grab your initial state from the window object when you create your store.