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

Добрый день.
Решил добавить себе в 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?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы