use middleware to manage localStorage/cookies

Question

On my react-redux app, I have the sign in actions that manage local storage for the token

export function signInUserSuccess(token) {
  localStorage.setItem('token', token);
  return {
    type: SIGNIN_USER_SUCCESS,
    payload: {
      token: token
    }
  }
}

export function signOut() {
  localStorage.removeItem('token');
  return {
    type: SIGNOUT_USER
  }
}

and load any existing token from local storage at index.js

let token = localStorage.getItem('token');
if (token !== null) {
  store.dispatch(signInUserSuccess(token));
}

I know this is not a good approach to have localStorage at actions, and this answer suggests to handle it at middleware.

Having a look at one of the middleware, redux-storage, I do not understand how to replace the localStorage.setItem(), localStorage.removeItem() and localStorage.getItem() with the given middleware operations which only uses LOAD and SAVE actions. I have no problem with setting up the package, but I do not understand how to use it for my sign in and sign out actions.

score 1 · Answer 1 · answered Sep 08 '16 at 06:57

I am not familiar with redux-storage, but I have written simple middlewares for myself to handle this. If you are only doing what is in your example it may be easier to write a small custom middleware rather than add another dependency. For example:

localstorage.js

import { UPDATE_CODE, UPDATE_HISTORY } from '../actions/index';

export default function ({ dispatch }) {
  return next => action => {
    switch (action.type) {
      case UPDATE_CODE:
        localStorage.setItem('code', JSON.stringify(action.payload));
        break;
      case UPDATE_HISTORY:
        localStorage.setItem('history', JSON.stringify(action.payload));
        break;
    }
    next(action);
  };
}

This is in ES6 syntax. Middleware behaves similarly to reducers in that you switch off the action.type. The next is a function that is chained through all your middleware, so you pass the action object to it after you complete your middleware logic.

Then in your root/entry/whatever file (and making sure you accommodate your file structure):

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import LocalStorage from './middlewares/localstorage';

import reducers from './reducers';
import routes from './routes';

const createStoreWithMiddleware = applyMiddleware(LocalStorage)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.react-container'));

You can make the middleware logic as complex as you need, or write multiple (one for localstorage, one for cookie?). Actions pass through every middleware.

Thanks for the input, it helps me a lot understanding custom middlewares. — spondbob, Sep 09 '16 at 02:53
I forgot to mention this but Dan Abramov has a great set of video tutorials redux - there is one specifically about localStorage: https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage?course=building-react-applications-with-idiomatic-redux — erik-sn, Sep 09 '16 at 11:10
This is good but you're not reading from localStorage anywhere — png, Feb 19 '20 at 17:58

use middleware to manage localStorage/cookies

1 Answers1