在Redux中获取初始状态

Question

我正在构建一个应用程序，在这个应用程序中，我需要在我的主组件挂载之前从服务器获取初始的redux状态。 在我的actions中，我使用redux-thunk来获取必要的数据：

export const getInitialStateSuccess = (state: any): IfetchThemeSuccess => {
    console.log('state', state);
    return {
        type: FETCH_INIT_STATE,
        state
    };
};


// here I fetch the data from the server and call getInitialStateSuccess
// to pass it to redux init state
export const getInitialState = () => {
     return (dispatch: any) => {
         api.getInitState().then((data) => {
              dispatch(getInitialStateSuccess(data));
          });
      };
 }

然而，我不知道应该在哪里调用getInitialState()。我需要在主组件挂载之前初始化应用程序的状态。您认为在componentWillMount中调用此操作是否是一种好的做法？它只需要被调用一次。 请告诉我上述方法是否是一个好的实践。 谢谢！

- katya

Answer 1

您可以在 WillMount 中调用它，但是更推荐在 DidMount 中调用。这是因为如果您使用服务器端渲染，WillMount 可能会被调用两次。

无论哪种方式，由于调用是异步的，并且在数据加载之前进行呈现，您都需要一个中间的“加载”屏幕。

- Nick

---

你认为如果我最初在createStore(reducer, [])中提供一个空的初始状态，然后在componentWillMount中调用getInitialState()，这是一个好的做法吗？ - katya

没问题，这完全取决于你如何处理业务逻辑。个人而言，我会有一些初始状态来反映数据未加载。例如：{loaded: false, fetching: false, listOfItems: []}，然后从那里开始工作。 - Nick

是的，已加载标志是一个好主意。谢谢！ - katya

Answer 2

将API或服务器调用放置的最佳位置是在componentDidMount()生命周期中。

请注意，一旦您的数据覆盖了初始状态，这将触发重新渲染。

这将强制您在componentDidMount()生命周期之前管理初始状态。通常做法是在构造函数方法中执行此操作。

您可以在React文档中自行查看：https://reactjs.org/docs/react-component.html

"componentDidMount()在组件挂载后立即调用。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，则在此处实例化网络请求是一个好方法。在此方法中设置状态将触发重新渲染。"

- Sil Cia

---

谢谢您的评论，非常有帮助。跟进问题是，我是否需要使用componentWillMount来获取任何数据？还是它仅用于与数据无关的应用程序某些配置？ - katya

从技术上讲，你可以使用componentWillMount来获取数据，但主要的缺点是，正如Nick在另一个评论中所说，如果你正在进行任何服务器端渲染，你的组件将会被渲染两次。一次在服务器端，一次在客户端。因此，componentDidMount()更优越，因为它只会在状态改变后在客户端重新渲染一次。 - Sil Cia

Answer 3

你的初始状态将存储在一个 reducer 中。一旦你将 react 组件连接（connect）起来，你就可以使用帮助方法 mapStateToProps 来访问当前状态。

- João Vilaça

---

谢谢您的回答，但我的主要问题是我应该从服务器获取这个初始状态？ - katya

嘿@João：在reducer中放在哪里/如何放置？你会在那里进行API调用吗？ - George Katsanos