Как решить проблему с LocalStorage в приложении через Redux?

Question

[Сергей]

Добрый день, решил доработать секции комментариев, написанную через Redux и добавить сохранение в localStorage. Однако при попытке добавления комментария, консоль выдает Cannot read property 'push' of null. Не могу понять, в чем проблема.
Ниже код редьюсера.

const comments = (state = [], action) => {
  switch (action.type) {
    case "ADD_COMMENT":
      let componentDidMount = localStorage.getItem("comms");
      componentDidMount = JSON.parse(componentDidMount);
      const addCommentObj = {
        id: action.id,
        name: action.name,
        date: action.date,
        comment: action.comment
      };

      componentDidMount.push(addCommentObj);
      let toLocalStor = JSON.stringify(componentDidMount);
      localStorage.setItem("comms", toLocalStor);
      return [
        ...state,
        {
          id: action.id,
          name: action.name,
          date: action.date,
          comment: action.comment
        }
      ];

    case "REMOVE_COMMENT":
      return state.filter(el => el.id !== action.payload.id);

    default:
      return state;
  }
};

export default comments;

Answer 1

[Сергей Сунцев]

Очень странный код. Но проблема на поверхности. У вас изнаально в localStorage нет данных, и вы пытаетесь в null вызвать метод push, хотя он доступен только для массивов.
сделайте так

let componentDidMount =  JSON.parse(localStorage.getItem("comms")) || [];

вместо

let componentDidMount = localStorage.getItem("comms");
componentDidMount = JSON.parse(componentDidMount);

Answer 2

[abberati]

Когда элемента нет в localStorage, метод getItem возвращает null. В null нельзя запушить — это не массив.

Не относится к вопросу, но: нельзя производить сайд-эффекты в редьюсерах. Читайте доку.

Answer 3

[Robur]

componentDidMount у вас null.

попробуйте

componentDidMount = JSON.parse(componentDidMount) || []

а вообще json.parse надо в try/catch завернуть