Question

在安装react-redux应用之前，我需要从服务器获取一些我的initialState。

现在我正在使用以下代码：

//store.js (pseudocode)
const initialState = {
  userDate: {
    loggedIn:false,
    name: ""
  }
};

(async () => {
  const { data } = await axios.get("user/profile", { withCredentials: true });
  if (data.name) {
    initialState.userData = {
      ...initialState.userData,
      loggedIn: true,
      name: data.name
    };
  };

  const store = createStore(
    reducer,
    initialState
  );

  ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
  );
})();

但是我认为它不是“ redux样式”，而且，我想在减速器中而不是在根文件中管理我的initalState，如下所示：

//userReduce.js (pseudocode)
const initialState = {
    loggedIn: false,
    name: ""
  };

const { data } = await axios.get("user/profile", { withCredentials: true });
if (data.name) {
  initialState = {
    loggedIn: true,
    name: data.name
  };
}

export default function userData(state = initialState, action) {
...
}

我知道我可以执行异步操作来获取数据，但是问题在于操作分派，应用程序已经挂载并重定向用户时，好像他没有登录一样。

Answer 1

解决方案n.1

“ redux方式”将是在服务器上产生完整的初始状态，并像JSON.stringify({})一样在您的HTML中提供window.__REDUX_STATE__ = {...}。

这样，您的React App可以同步启动。

解决方案n.2

如果您真的希望它是异步的，并且在页面加载后从API加载状态，则可以尝试执行以下操作：

获取完整状态（您还希望组成不同的子状态...看一下GraphQL！）并等待JSON响应
与初始状态同步启动您的React App

注意：：我会选择n.1，因为这是最快的第一个有意义的帧。 Instagram就是这样：-）

如何获取异步redux initialState？

1 个答案:

解决方案n.1

解决方案n.2