Where to write to localStorage in a Redux app?

by

Reducer is never an appropriate place to do this because reducers should be pure and have no side effects.

I would recommend just doing it in a subscriber:

store.subscribe(() => {
  // persist your state
})

Before creating the store, read those persisted parts:

const persistedState = // ...
const store = createStore(reducer, persistedState)

If you use combineReducers() you’ll notice that reducers that haven’t received the state will “boot up” as normal using their default state argument value. This can be pretty handy.

It is advisable that you debounce your subscriber so you don’t write to localStorage too fast, or you’ll have performance problems.

Finally, you can create a middleware that encapsulates that as an alternative, but I’d start with a subscriber because it’s a simpler solution and does the job well.

More Related Contents:

  1. Update single value in item array | react redux
  2. How do I store an array in localStorage? [duplicate]
  3. How to dispatch a Redux action with a timeout?
  4. Does React keep the order for state updates?
  5. React: how to update state.item[1] in state using setState?
  6. Is it safe to store a JWT in localStorage with ReactJS?
  7. How can I display a modal dialog in Redux that performs asynchronous actions?
  8. Get HTML5 localStorage keys
  9. How to delete a localStorage item when the browser window/tab is closed?
  10. window.localStorage vs chrome.storage.local
  11. How to overcome the CORS issue in ReactJS
  12. How to use Local storage in Angular [duplicate]
  13. Is localStorage.getItem(‘item’) better than localStorage.item or localStorage[‘item’]?
  14. Redux – multiple stores, why not?
  15. How to mock localStorage in JavaScript unit tests?
  16. Accessing localStorage from a webWorker
  17. Javascript/HTML Storage Options Under File Protocol (file://)
  18. How do I access store state in React Redux?
  19. How can I serialize a function in JavaScript?
  20. Read Store’s Initial State in Redux Reducer
  21. Can you use HTML5 local storage to store a file? If not, how?
  22. How to store objects in HTML5 localStorage/sessionStorage
  23. Cannot update a component while rendering a different component warning
  24. localStorage – use getItem/setItem functions or access object directly?
  25. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  26. Store an array with chrome.storage.local
  27. Redux Presentational Components Vs Container Component
  28. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  29. Push JSON Objects to array in localStorage
  30. Save data to local storage

Leave a Comment