Redux - load initial state asynchronously

Question

I am trying to develop the cleanest way to load the initial state of my Redux stores when it comes from API calls.

I understand that a typical way to provide the initial state is to create its server part when loading the page and provide it in Redux createStore () as a simple object. However, I am writing an application that I plan to package in Electron, and therefore this will not work.

So far, the best I've been able to come up with is to launch an action immediately after creating the repository, which will go and request the initial state for the repository - either one action that retrieves the entire initial state, or the number of actions, each of which returns the initial state for one parts of the repository. This would mean that my code looks like this:

const store = createStore(reducer, Immutable.Map(), middleware);
store.dispatch(loadStateForA());
store.dispatch(loadStateForB());
store.dispatch(loadStateForC());

While this will work, it seems like a bit of a rough side, and so I wonder if there is any better alternative that I am missing?

Answer 1

( ). , , .

. "" React/Redux, , , .

, . Promise, store.

export const configureStoreAsync = () => {
  return new Promise((resolve) => {
    const initialState = initialStoreState;//default initial store state
    try {
        //do some async stuff here to manipulate initial state...like read from local disk etc. 
        //This is again wrapped in its own Promises.
        const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
        resolve(store);
      });
    } catch (error) {
      //To do .... log error!
      const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
      console.log(store.getState());
      resolve(store);
    }
  });
};

, :

configureStoreAsync().then(result => {
  const store = result;
  return ReactDOM.render(
    <Provider store={store}>
      <App store={store}/>
    </Provider>,
    document.getElementById('Main'));
});

, , , . , .

Answer 2

, ():

• ,
• ,

---

1 :

- , , .

- " "

, , - , .

---

createStore asynch. (byGoga Mantri) Promise, .

, , , , require import ( store.dispatch store.subscribe) ; Promise s. - Redux-y.

Answer 3

:

• spinner index.html
• Ajax, ,
• ajax

:

• , ajax
• ajax

---

root.js

const store = createStore(
    rootReducer,
    applyMiddleware(
        ...,
        actionCallbackOnceMiddleware(INITIAL_AJAX_END, render)
    )
)

function render() {
    ReactDOM.render(
        <Provider store={store}>
            <RootComponent/>
        </Provider>,
        document.getElementById('root')
    )

    document.getElementById('loading').dispatchEvent(new Event('hide'))
}

store.dispatch(initialAjaxAction());

---

middleware/actionCallbackOnce.js

export default (actionType, callback) => store => next => {
    let called = false;

    return action => {
        next(action);

        if (!called && action.type === actionType) {
            called = true;
            callback();
        }
    }
}

---

index.html

<div id="loading">
    <span>Loading</span>
    <style type="text/css">...</style>
    <script>
        (function(loading){
            loading.addEventListener('hide', function(){
                loading.remove();
            });
            loading.addEventListener('error', function(){
                loading.querySelector('span').textContent = "Error";
            });
        })(document.getElementById('loading'));
    </script>
</div>

<div id="root"></div>