redux-async-initial-state

Redux Async Initial State

Redux middleware for async loading of initial app state.

npm install --save redux-async-initial-state

What? Why?

With redux it is quite simple to synchronously load initial state, i.e. from localStorage:

...
const initialState = JSON.parse(localStorage.getItem('state'));
const store = storeCreator(reducer, initialState);

But it becomes quite complicated to do it asynchronously, i.e. from server or from async storage, like in React Native. This middleware do it for you.

Usage

• Add package

npm install --save redux-async-initial-state

• Change your reducer and add middleware:

before:

import { createStore } from 'redux'
import * as reducers from 'reducers'

const reducer = combineReducers(reducers)
const store = createStore(reducer)

After

import { createStore, applyMiddleware } from 'redux';
import * as reducers from 'reducers';
import { * as asyncInitialState } from 'redux-async-initial-state';

// We need outerReducer to replace full state as soon as it loaded
const reducer = asyncInitialState.outerReducer(combineReducers({
  ...reducers,
  // We need innerReducer to store loading state, i.e. for showing loading spinner
  // If you don't need to handle loading state you may skip it
  asyncInitialState: asyncInitialState.innerReducer,
}));

// Load state function
// Should return promise that resolves application state
const loadStore = () => {
  return new Promise(resolve => {
    fetch('/store')
      .then(response => response.json())
      .then(resolve);
  });
}

const storeCreator = applyMiddleware(asyncInitialState.middleware(loadStore));
const store = storeCreator(reducer);

Reducer

The shape of innerReducer is:

{
  loaded: false,
  loading: false,
  error: false
}

You can add it to you reducer if you want to handle loading state, i.e. to show loading spinner. Here is React example (it uses reducer, described above):

import { connect } from 'react-redux';

@connect(state => ({
  loading: state.asyncInitialState.loading,
}))
class MyComponent extends React.Component {
  render() {
    if (this.props.loading) {
      return <div>Loading...</div>
    }
    return ...;
  }
}