How to implement localStorage in Redux?

Good afternoon.
Decided to add in Redux program (comments) preservation of local storage, put the code in a separate folder:
export const loadState = () => {
 try {
 const serializedState = localStorage.getItem("state");
 if (serializedState === null) {
 return undefined;
}
 return JSON.parse(serializedState);
 } catch (err) {
 return undefined;
}
};

export const saveState = state => {
 try {
 const serializedState = JSON.stringify(state);
 localStorage.setItem("state", serializedState);
 } catch (err) {}
};

In the end, the original index file looks like the following:
import React from "react";
import ReactDOM from "react-dom";

import App from "./containers/app";
import { createStore } from "redux";
import comments from "./reducers";
import { loadState, saveState } from "./localStorage/localStorage";

import "./styles.css";

const persistedState = loadState();

const store = createStore(comments, persistedState);

store.subscribe(() => {
saveState(store.getState());
});

ReactDOM.render(<App store={store} />, document.querySelector("#app"));

However, in order to "push through" constant persistedState in the store, I had to remove initialState (prior to the modifications, the code looked like this and worked fine
const initialState = [];

const store = createStore(comments, initialState);

)
After removal of initialState and compile using webpac, the app doesn't open and gives an error (although codesandbox, where I wrote the code initially, it works). That is, as I understand it, after compiling, the problem is that there is no initialState.

Tell me, please, how correctly to implement it - and leave initialState and shove localStorage?

By the way, the guide from which I took this implementation, written by Dan Abramov.
April 4th 20 at 00:36
1 answer
April 4th 20 at 00:38
I'm guessing maybe the problem is that on first boot you will state undefined. If you have when you open the page in persistedState undefined, in redaxe it is impossible to state was undefined. There may be an empty array (as in the case initialState), empty object, empty string, but not undefined. For good, you need to check what lies inside persistedState when you open the page, and this dance then. Sorry so vague, don't have access to a laptop, and You attached a screenshot of the error, so shoot for good luck.
Thanks for the comment) the Screenshot below, but it is associated with the ID of another element of the program.
5e0f2248578be290309932.jpeg
Writes comments.map is not a function
Source:
import React from "react";

const CommentSection = props => {
 const { comments, removeComment } = props;
 return (
the <div>
 {comments.map(comm => {
 return (
 <section key={comm.id} className="commentsSection">
 <div className="nameSection">
 {comm.name} {comm.date}
</div>
 <div className="commentSection">{comm.comment}</div>
<button
className="deleteBtn"
 onClick={ev => removeComment(comm.id)}
>
To remove
</button>
</section>
);
})}
</div>
);
};

export default CommentSection;
- Karen_Halvorson commented on April 4th 20 at 00:41
@Karen_Halvorson, there are comments.map is not a function, so comments either empty or it is not iterable format. - Althea.Barte commented on April 4th 20 at 00:44

Find more questions by tags JavaScriptReactRedux