redux-storage with redux-saga - not saving

948 Views Asked by At

I am trying to use both the redux-storage and redux-saga middleware for redux. Each middleware works great on its own, but when I apply redux-storage with redux-saga, the store does not load the prior state. I am adding the middleware as follows:

const combinedReducers = storage.reducer(combineReducers(reducers));
import createEngine from 'redux-storage-engine-reactnativeasyncstorage';
const engine = createEngine('storage-key');
const storageMiddleWare = storage.createMiddleware(engine);
const sagaMiddleWare = createSagaMiddleware(mySagas); 
export const store  = createStore(combinedReducers, applyMiddleware( sagaMiddleWare, storageMiddleWare)); 
 const load = storage.createLoader(engine);
 load(store).then(() => 
    {   
        console.log("Loaded State");
        console.log(store.getState());

    }).done();
2

There are 2 best solutions below

2
On

D'oh! A bunch of 'EFFECT_TRIGGERED' Actions are emitted right away from redux-saga. These trigger in redux-storage a save event of an empty store, before the store has loaded. The solution is to add EFFECT_TRIGGERED to the blacklist when creating the redux-storage middleware like so:

const storageMiddleWare = storage.createMiddleware(engine, [= 'EFFECT_TRIGGERED']);
0
On

Middlewares execute in the order they're passed into applyMiddleware. Loading from storage should be before the saga middleware, eg:

const finalCreateStore = compose(
  applyMiddleware(
    storage.createMiddleware(engine),
    createSagaMiddleware(sagas)
  )
)(createStore)