7

I've been working with React for a little while, and after some time i started to ask myself, why not store every piece of data that my components need to share in localstorage instead of using Redux. Redux need so much boilerplate while localstorage is so simple. You can say that you cant storage object in localstorage but you can JSON.stringfy them, and on recovery just parse them back. So problaby there's something that i cant see properly about that, cause Redux is largely used and localstorage is normally used just to save data you dont wish to loss on refresh and things like that.

GBenitez
  • 107
  • 4
  • Off the top of my head, I know you wouldn't be able to react to changed state from localStorage, such as the dependencies in `useEffect`. But I think there are existing libraries out there that do what you want, such as [use-persisted-state](https://github.com/donavon/use-persisted-state). – HaveSpacesuit Jun 03 '20 at 13:36
  • Does this answer your question? [React Context Api vs Local Storage](https://stackoverflow.com/questions/62105880/react-context-api-vs-local-storage) – Dennis Vash Jun 03 '20 at 13:46
  • localStorage is really really slow – mchl18 Jun 03 '20 at 13:48

4 Answers4

4

This question was on my head when I started developing react apps. There are many reasons than below to use redux over localStorage. but at least

  1. Using Redux alongside react-redux is not only for store data. don't forget that changing in a state will reRender All components that listens to that state. and that is really what react-redux does.
  2. stringfy / parse from localStorage will make your app (on high-scale) slower and also will not sync all component while changing state.
Maged Mohamed
  • 331
  • 3
  • 5
  • `changing in a state will reRender All components that listens to that state. and that is really what redux do.` No, that is what react-redux does. Redux is only the event store and has no knowledge about React. – HMR Jun 03 '20 at 14:00
  • @HMR Yes, You are right. by using react-redux you will gain the full power of smart components. so, I supposed that he was looking to replace redux and react-redux by localStorage. I'll edit it btw, thanks :) – Maged Mohamed Jun 04 '20 at 16:48
3

Redux and localStorage have different use cases actually. Redux you'll use to manage your application state across multiple components.

Local Storage you'll use to persist properties in the browser for later usage. The problem is that any change on your localStorage won't reflect on your application. You'll have to do it manually.

Daniel Cunha
  • 501
  • 3
  • 8
1

The purpose of react-redux is to allow other components to connect to state and then react on changes. You are loosing the whole scope of using react-redux/context api.

Bujor Iosif
  • 69
  • 1
  • 9
  • You describe the purpose of redux to be what react-redux is. Redux is an event store and event stores decouple what happens in your application (actions) with the implementation of what needs to be done when something happens (middleware and reducers). This enables you to write code in a diffent (more maintainable) way and use redux dev tools to debug your code. [Here](https://redux.js.org/introduction/motivation) is the motivation for redux and it has little to do with React but can be used with React. – HMR Jun 03 '20 at 13:57
  • 1
    I've edited the answer. The idea remains, it's way more complicated to manage the state from local storage(stringify, observers and so on) instead of using a dedicate state management solution. – Bujor Iosif Jun 03 '20 at 15:33
0

The answer is in your question, yes local storage is only used for storing data in the browser while redux and context api solve some different problem. It separates your data layer from your view to easily manage your data state. If the app is not really big then you should consider going with Context API. You can read this article for more info. Note, stringifying and parsing itself is a pretty heavy operations for larger datasets.

Muhammad Ali
  • 1,762
  • 2
  • 10
  • 14