Redux store and sessionStorage: syncing defeats purpose?

[stiofand]

Due to lack of concrete examples, I am unclear how this actually works. My main intention in using this library is to persist some state values to sessionStorage (I'm using the relevant engine) during a page refresh. However, following the limited setup in the documentation, every time I refresh the page, the initial state is recalled and updates the sessionStorage with the same value, this to me defeats the entire purpose of browser persistence.

It's most likely Im not grasping the focus of this, but as I say, I cannot find any practical examples of this library, an thus I remain in the dark as to how to properly implement it,

[gregorskii]

import * as storage from 'redux-storage';
import createEngine from 'redux-storage-engine-sessionstorage';

const storageKey = 'somekey';

const engine = createEngine(storageKey);
const middlewares = [
  storage.createMiddleware(engine)
];

const createStoreWithMiddleware = (reducers) => {
  return createStore(
    storage.reducer(combineReducers(reducers)),
    composeWithDevTools(applyMiddleware(...middlewares))
  );
};

const store = createStoreWithMiddleware(Reducers);
const load = storage.createLoader(engine);

load(store);

export default store;

Seems to work for me. Dunno if this is still relevant, but here ya go! :)

[mrgurdeep]

@stevematdavies did it got resolved for you ? you need to use redux-storage-engine-sessionstorage and it will work.

[vicky-blr]

I don't understand second part (below) on how to customize wait part as mentioned. Anyone has idea how I can customize this reducer which is getting executed when SAVE and LOAD actions get dispatched.

Actions

redux-storage will trigger actions after every load or save operation from the underlying engine.

You can use this, for example, to display a loading screen until the old state has been restored like this:

import { LOAD, SAVE } from 'redux-storage';

function storageAwareReducer(state = { loaded: false }, action) {
    switch (action.type) {
        case LOAD:
            return { ...state, loaded: true };

        case SAVE:
            console.log('Something has changed and written to disk!');

        default:
            return state;
    }
}