Как правильно реализовать localStorage в Redux?

Question

[Сергей]

Добрый день.
Решил добавить себе в Redux-программу (комментарии) сохранение local storage, засунул код в отдельную папку:

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) {}
};

В итоге, исходный index файл выглядит следующим образов:

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"));

Однако, для того, чтобы "пропихнуть" константу persistedState в store, мне пришлось удалить initialState (до изменений код выглядел так и отлично работал

const initialState = [];

const store = createStore(comments, initialState);

)
После удаления initialState и компиляции через вебпак, приложение не открывается и выдает ошибку (хотя в codesandbox, где я и писал код изначально, все работает). То есть, насколько я понял, после компиляции, проблема именно в отсутствии initialState.

Подскажите, пожалуйста, как можно грамотно это реализовать - и оставить initialState и засунуть localStorage?

К слову, гайд с которого я брал эту реализацию, написан самим Деном Абрамовым.

Answer 1

[Vladyslav Kliuiev]

Предположу, возможно проблема в том, что при первой загрузке у вас создаётся state со значением undefined. Если у вас при открытии страницы в persistedState undefined, то в редаксе нельзя чтобы в стейте был undefined. Там может быть пустой массив (как в случае initialState), пустой объект, пустая строка, но не undefined. По хорошему, нужно проверить что лежит внутри persistedState при открытии страницы, и от этого плясать дальше. Простите что так расплывчато, не имею доступа к ноутбуку, и Вы не прикрепили скриншот ошибки, так что стреляю на удачу.

Comments

[Сергей]

Спасибо за комментарий) Скриншот ниже, но он связан с кодом другого элемента программы.

Пишет - comments.map is not a function
Исходник:

import React from "react";

const CommentSection = props => {
  const { comments, removeComment } = props;
  return (
    <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)}
            >
              Удалить
            </button>
          </section>
        );
      })}
    </div>
  );
};

export default CommentSection;

[Vladyslav Kliuiev]

SerGeGR, есть comments.map not a function, значит либо comments пустой, либо он не в итерируемом формате.