如何获取异步redux initialState？

Question

I need to get some of my initialState from server, before react-redux app mounted.

Right now I'm using this code:

//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")
  );
})();

But I think it is not "redux-style", and also, I wanna manage my initalState in reducers, not in root file, something like this:

//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) {
...
}

I know that I can make async actions to get data, but problem is while action dispatching, app already mounted, and redirect user as if he was not logged in.

Answer 1

Solution n.1

The "redux way" would be to produce the full initial state on the server and serve it JSON.stringify({}) in your HTML like window.__REDUX_STATE__ = {...} .

This way your React App could boot synchronously.

Solution n.2

If you really want it to be asynchronous and load the state from an API after the page loads, you could try to do something like:

1. fetch the full state (you also want to compose different sub-states... take a look at GraphQL!) and await the JSON response
2. boot your React App synchronously with the initial state

---

NOTE: I would go for n.1 as is the fastest when it comes to time to first meaningful frame. Instagram does it that way :-)