10

Let's assume i have a small objects in my state of component "App". So to save the state in redux, why can't i save it in session storage? Is there any solid difference for this?

Antriksh Sharma
  • 103
  • 1
  • 1
  • 4
  • You can if you want to. They’re very different though. Redux won’t be around when reloading or loading a new page and session storage won’t have reactivity or any other features Redux brings to table. They could be used as complementary things though – Sami Kuhmonen Jul 07 '19 at 15:26

4 Answers4

16

You can do so.

The difference is,

React is smart enough to update your DOM when you use state and update the state using setState. When you use setState in react app it simply re-renders your component and if you are using that state value in component to show some values / data that changes are updated on your component.

When you store data in sessionStorage then your app will not reacts automatically to change in sessionStorage values. In this case your component will not re-render and your changes are not updated on your component. But for this case you have a solution called forceUpdate()

from the docs,

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

Though you have forceUpdate, normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

ravibagul91
  • 18,551
  • 5
  • 33
  • 54
6

Browser Storage allows only keys associated with string values, nothing complex, so the code required to simply get different types of data in and out of local/session is nasty, all by itself.

The "storing state" part of Redux is really the least interesting part. The important parts of Redux are the pattern of using actions and reducers, and that components can subscribe to those state changes, so that if a reducer updates the state, components using that will automatically re-render. Using browser storage techniques really only solve the "where does the state live" part. You'd still need mechanisms for updating that state and letting components know to re-render when the state updates

also session storage may be zero for eg simply using private browsing mode in Safari (including on iOS) will set the storage quota to zero

Also handling of localStorage and sessionStorage for a React application that treated it somewhat like state. It is the most error-prone, unpredictable, headache-inducing code in a codebase.

also you can use redux-locastorage to save store to local storage or redux-sessionstorage to save to session storage , if you still want to use them

Reetesh Kumar
  • 432
  • 2
  • 8
3

Simply your component won't be re-renderd by changing the session storage, but it will by changing the redux state if that component is connected to redux..

Omer Khan
  • 407
  • 2
  • 7
1

Redux allows any component to "connect" to the state and become aware of any state changes and update accordingly. When you use session storage, you cannot easily make components aware of the state and so you can't use react in an optimal way.

Also, writing to and reading from session storage is much more costly/inefficient than updating a redux store.

Speed of session storage: Speed of sessionStorage

Lawynn Jana
  • 88
  • 1
  • 5