Для инициализации состояния Redux из локального хранилища (Local Storage) без использования библиотеки Redux Persist, вы можете следовать приведенному ниже плану:
### 1. Считать данные из Local Storage:
Первым шагом вам нужно создать функцию, которая прочитает данные из Local Storage и преобразует их из JSON обратно в состояние, которое может использовать ваше приложение.
```javascript
// ./localStorage.js
export const loadState = () => {
try {
const serializedState = localStorage.getItem('state');
if (serializedState === null) {
return undefined; // Local Storage is empty
}
return JSON.parse(serializedState);
} catch (err) {
console.error('Could not retrieve state from Local Storage', err);
return undefined;
}
};
```
### 2. Обновлять Local Storage при изменении Redux Store:
Далее, вам нужно будет подписаться на изменения Redux Store, чтобы обновлять Local Storage всякий раз, когда состояние изменяется.
```javascript
// ./localStorage.js
export const saveState = (state) => {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
} catch (err) {
// handle write errors, possibly by ignoring them
}
};
```
### 3. Инициализировать состояние store через configureStore:
При создании Redux Store, используя `configureStore`, Вы можете задать начальное состояние, считанное из Local Storage, как начальное состояние для вашего приложения.
```javascript
// ./store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';
import { loadState } from './localStorage';
const preloadedState = loadState();
const store = configureStore({
reducer: rootReducer,
preloadedState
});
// Подписка на обновление Local Storage при каждом изменении store
store.subscribe(() => {
saveState(store.getState());
});
export default store;
```
### 4. Точка входа для инициализации приложения:
Точка входа для запуска приложения обычно находится в вашем главном файле JavaScript, часто называемом `index.js`, где вы используете `ReactDOM.render()`, чтобы отрендерить ваше приложение и передать ему Redux Store через `Provider`.
```javascript
// ./index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
```
Используя эту настройку, вы можете гарантировать, что состояние Redux Store будет синхронизировано с Local Storage без использования библиотек, таких как Redux Persist. Будьте внимательны с производительностью, если ваши обновления состояния часты и тяжеловесны, так как это может привести к замедлению работы приложения.