0

In the reducer, I need to read data from localStorage to decide the count of record, so that the defaultly selected item's name can be decided. Is it possible to use localStorage in redux reducer?

code,

const ugData = JSON.parse(localStorage.getItem("ugData"));
const defaultState = {
     ...
     // if in the localstorage, 
     // use allgroups length to decide 
     // the selected item's name
     selectedGroupName: ugData.allGroups.length > 0 ? ugData.allGroups[0].name:"" ,
}

currently, I get errors like this,

ReferenceError: localStorage is not defined

ideas are welcome.

Markus
  • 1,598
  • 2
  • 13
  • 32
Yu Fang
  • 520
  • 5
  • 17
  • 1
    check who is "this" localstorage should be available for the scope you need. And also in redux you should have only One Single source of Truth... this is a must in redux applications. – juan garcia Feb 27 '18 at 08:53
  • What browser are you using? – JJJ Feb 27 '18 at 08:54
  • 1
    @juan makes a valid point. You can try using `window.localStorage` to avoid confusion. – JJJ Feb 27 '18 at 08:56
  • I use chrome. But this issue happens when at compiling stage. – Yu Fang Feb 27 '18 at 08:56
  • I would take a look into the use of the spread operator too, I think it is not correctly used, separate a bit the code to make it a bit more easy to find the problem, I am sure you will find that the problem is more easy than it looks like with a better indentation and separation of code – juan garcia Feb 27 '18 at 08:59
  • https://stackoverflow.com/questions/35305661/where-to-write-to-localstorage-in-a-redux-app – Jayant Patil Feb 27 '18 at 10:47

1 Answers1

0

Your problem doesn't seem to be related to redux. localStorage should always exist in a browser, in any context. Therefore passing it somewhere isn't required.

It would be interesting what you mean with happens when at compiling stage, because there is not compiling stage with JS.

By the way, you should do these thing only on the top level reducer, when initialise it, to keep your overall reducer free from side effects.

Instead of reading from the local storage in a reducer, I'd advice to have the information in the redux store, read it from there and update the local storage when it changes. And only initialise the redux state from local storage when the page is loaded.

Markus
  • 1,598
  • 2
  • 13
  • 32
  • Thanks for advice. Since I use the meteor platform to build the application, it does something which looks like "compiling" e.g. syntax check. Maybe this description is not precise at all. – Yu Fang Feb 28 '18 at 00:35
  • I finally add the localStorage.setItem/getItem in some action file, dispatch the setItem/getItem actions and use store.getState() to get the state of the content of the localStorage. FYI. I am not sure whether this is a good solution though. – Yu Fang Mar 02 '18 at 16:52
  • Use `subscribe` on the store to check if the substate you want to persist changed and if it did update the local storage with setItem. (https://redux.js.org/api-reference/store#subscribe) You can use `===` to compare your substate, because immutability. Use `getItem` only when setting up your store (`createStore`) to use in your initial state. You should not use actions, as actions are most effective when they only describe an event that happened, not how this event should be handled. Otherwise you'll end up with many non-semantic actions polluting your dev tools. – Markus Mar 03 '18 at 19:24
  • I don't know meteor. You maybe have to tell the syntax check the API will be available. – Markus Mar 03 '18 at 19:26