Как можно инициализировать хранилище данными из локалстора в redux toolkit?

В React-приложениях с использованием библиотеки Redux Toolkit можно легко инициализировать хранилище данными из локального хранилища (LocalStorage). Для этого нам понадобятся следующие шаги:

1. Установка Redux Toolkit и настройка базового хранилища:

npm install @reduxjs/toolkit

или

yarn add @reduxjs/toolkit

Создайте файл store.js и добавьте в него код:

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    // дополнительные редьюсеры здесь
  },
});

export default store;

2. Добавление редьюсера и экшенов для работы с данными из локального хранилища:

import { createSlice } from '@reduxjs/toolkit';

const initialState = { data: null };

const localStorageSlice = createSlice({
  name: 'localStorage',
  initialState,
  reducers: {
    setData: (state, action) => {
      state.data = action.payload;
    },
  },
});

export const { setData } = localStorageSlice.actions;

export default localStorageSlice.reducer;

3. Импорт и настройка хранилища в корневом компоненте приложения:

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. Инициализация хранилища данными из локального хранилища:

Добавьте следующий код в файл store.js после импорта:

import { setData } from './localStorageSlice';

const persistedData = localStorage.getItem('data');

if (persistedData) {
  store.dispatch(setData(JSON.parse(persistedData)));
}

5. Сохранение данных в локальное хранилище при каждом обновлении хранилища:

Обновите редьюсер localStorageSlice следующим образом:

const localStorageSlice = createSlice({
  name: 'localStorage',
  initialState,
  reducers: {
    setData: (state, action) => {
      state.data = action.payload;
      localStorage.setItem('data', JSON.stringify(action.payload));
    },
  },
});

Теперь каждый раз, когда вы будете обновлять данные в хранилище с помощью экшена setData, они будут сохранены в локальное хранилище.

Таким образом, вы можете легко инициализировать хранилище Redux Toolkit данными из локального хранилища и автоматически сохранять все изменения обратно в локальное хранилище при каждом обновлении хранилища.