Using localstorage setItem/getItem with react-redux

Question

I'm new to redux and I can't seem to find an answer that that works with my problem. When I try to insert the localstorage as shown in this solution -> Where to write to localStorage in a Redux app? ...

I get an error saying my state is undefined later in the thread, and I'm not sure why.

Here is the full app in sandbox -> https://codesandbox.io/s/5yn3kqqlkk (I recommend using with chrome)

If I try to uncomment the lines in the following file...

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import "./Style.css";
import App from "./App";
import reducer from "./reducers";

let persistedState = localStorage.getItem("reduxState")
  ? JSON.parse(localStorage.getItem("reduxState"))
  : {};

const store = createStore(
  reducer,
  // persistedState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

// store.subscribe(() => {
//   localStorage.setItem('reduxState', JSON.stringify(store.getState()));
// });

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

The app crashes with the property in the state being read as undefined -> https://i.imgur.com/h0kcpBD.png

Can anyone tell me why this is happening and what I'm doing wrong?

It would be great if you could at least give some feedback on why the question was marked down. — Fiddle Freak, Dec 05 '18 at 05:42
I can only think it's something to do with the sandbox you are using, as i have an app setup exactly like this with store set/get local storage and it works perfectly. — Lloyd, Dec 05 '18 at 07:12
well originally I am running the app with yarn start on localhost:3000. Here is the github to clone the app -> https://github.com/jamespagedev/Redux-Todo ... I only threw it up on the sandbox to easily re-produce the error. — Fiddle Freak, Dec 05 '18 at 07:57
I found the issue, see my answer. Actually I have to give the credit to one of my friends. — Fiddle Freak, Dec 05 '18 at 08:23
I will leave this question up since react-redux is still fairly new... Just in case anyone else runs into this same issue. — Fiddle Freak, Dec 05 '18 at 08:25

score 3 · Accepted Answer · answered Dec 05 '18 at 08:23

3

Looks like the issue was with the persistentState else condition was setting an empty object instead of undefined (which was what the error message was reading). So it was mutating the state as an empty object instead of leaving it alone.

solution code...

let persistedState = localStorage.getItem("reduxState")
  ? JSON.parse(localStorage.getItem("reduxState"))
  : undefined;

answered Dec 05 '18 at 08:23

Fiddle Freak

1,923
5
43
83

I'll test this as well, my own projects I've been able to successfully use '{}'. Although my create store function is a bit more complex so this could affect the outcome. – Lloyd Dec 05 '18 at 08:26
well done this works 100%, and is probably the most correct method. – Lloyd Dec 05 '18 at 08:27
Great, I'm glad we can come together and provide a good solution :) – Fiddle Freak Dec 05 '18 at 08:28

Using localstorage setItem/getItem with react-redux

1 Answers1