0

I need to persist Redux Toolkit state to browser session storage. I need to do this so that Redux Toolkit state is maintained when the page is refreshed. Some googling seemed to indicate that redux-persist is a good option for this. I was also able to piece together a working implementation for this which saved to browser local storage which seems to be the default approach for redux-persist. I need to save to session storage but I found it more difficult to find a working implementation for that.

So one question is - is redux-persist hands-down the most popular choice for persisting redux-toolkit state across page refreshes - for now and the forseeable future? redux-persist's npm page shows that the package gets over 500k downloads per weeks so obviously it's massively popular. But I also noticed that the last update to this package was 3 years ago so it seems like the package isn't actively maintained.

Also, it seems like the ability to save state to browser session storage is a pretty basic design need so it seems like this would be something that redux-toolkit would eventually incorporate as part of its standard package - or at least as some type of optional/ancillary package offering. Does redux-toolkit have anything like this or do you know if that's something that the redux-toolkit dev team has on their roadmap?

Also, I noticed that the Redux Toolkit docs provide specific instructions for using Redux Toolkit with redux-persist. react-redux-firebase is the only other tool that the redux-toolkit docs call out. So it seems like redux-persist is currently the de facto standard for persisting global state across page refreshes when using redux-toolkit. Is that the general concensus in the redux-toolkit dev community? Are there any new developments in the pipeline that I should know about?

One last thing - I was able to get redux-persist to save to the default target of local storage in my nextjs app but I was having some issues using redux-persist to persist redux-toolkit state to browser session storage. Do you know of any public repos which provide a good code example for this?

user19634493
  • 61
  • 4
  • Here is a simple DIY middleware. Just change `localStorage` to `sessionStorage`. https://stackoverflow.com/q/73952965/10431574 – Linda Paiste Oct 14 '22 at 22:02

1 Answers1

0

Also, it seems like the ability to save state to browser session storage is a pretty basic design need so it seems like this would be something that redux-toolkit would eventually incorporate as part of its standard package

It's so basic that you can do it in just a few lines, you don't necessarily need any library at all:

// middleware
const saveToSessionStorage = store => next => action => {
    const result = next(action)
    window.sessionStorage.setItem('reduxState', JSON.stringify(store.getState()))
    return result
}

// preloaded state
createStore(reducer, JSON.parse(window.sessionStorage.getItem('reduxState')))

Of course this is not very fancy, you might want to not save the state for every action every time, sessionStorage could be empty initially, etc. etc. - but it's worth a try to start with something simple.

timotgl
  • 2,865
  • 1
  • 9
  • 19