在 Redux 中获取初始状态答案

【问题标题】：Fetching Initial State in Redux在 Redux 中获取初始状态
【发布时间】：2018-02-21 16:36:34
【问题描述】：

我正在构建一个应用程序，我需要在安装主要组件之前从服务器获取初始 redux 状态。在我的操作中，我使用了 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 中调用此操作是一个好习惯吗？它只能被调用一次。请让我知道我上面描述的方法是否是一种好的做法。谢谢！

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

您可以在WillMount 中调用它，但首选DidMount。这是因为如果你有服务器端渲染，WillMount 可以被调用两次。

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

【讨论】：

你认为如果我提供一个空的初始状态给 redux 最初 createStore(reducer, []) 然后在 componentWillMount 我会调用 getInitialState() 是否是一个好习惯？
没关系，这完全取决于您如何处理业务逻辑。就个人而言，我会有一些初始状态来反映未加载的内容。例如。 {loaded: false, fetching: false, listOfItems: []} 并从那里开始工作。
是的，加载标志是个好主意。谢谢！

【解决方案2】：

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

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

这将迫使您在 componentDidMount() 生命周期之前管理您的初始状态。在构造方法中执行此操作是常见的做法。

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

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

【讨论】：

感谢您的评论，非常有帮助。一个后续问题是，我是否需要使用 componentWillMount 来获取任何数据？或者只用于应用的一些与数据无关的配置
从技术上讲，您可以使用 componentWillMount 来获取数据，但主要缺点是，正如尼克在另一条评论中所说，如果您正在执行任何服务器端渲染，您的组件将被渲染两次。一次在服务器端，一次在客户端。所以 componentDidMount() 在某种意义上是优越的，一旦状态改变，它总是只会在客户端重新渲染一次。

【解决方案3】：

您的初始状态将存在于减速器中。在你的 react 组件上，一旦你将它设为connected，你就可以使用辅助方法mapStateToProps 来访问当前状态。

【讨论】：

感谢您的回答，但我的主要问题是我应该从服务器哪里获取这个初始状态？
嘿@João：它在减速器中的位置/方式是什么？你会在那里进行 API 调用吗？