Redux-Persist не сохраняет state
Не сохраняются данные из стейта в локалСторадж. Сталкивался кто?
store.js
import { createInjectorsEnhancer } from 'redux-injectors';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { createReducer } from './createReducer';
export function configureStore() {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
const persistConfig = {
key: 'root',
storage,
};
const enhancers = [
applyMiddleware(...middlewares),
createInjectorsEnhancer({
createReducer,
runSaga: sagaMiddleware.run,
}),
];
const persistedReducer = persistReducer(persistConfig, createReducer());
const store = createStore(persistedReducer, {}, composeWithDevTools(...enhancers));
const persistor = persistStore(store);
return { store, persistor };
}
createReducer.js
import { combineReducers } from 'redux';
export function createReducer(injectedReducers = {}) {
return combineReducers({
...injectedReducers,
});
}
Компоненты подключаются:
import { bindActionCreators, Dispatch } from 'redux';
import { ActionType } from 'typesafe-actions';
import { useEffect } from 'react';
import { createStructuredSelector } from 'reselect';
import { connect } from 'react-redux';
import { useInjectReducer, useInjectSaga } from 'redux-injectors';
import * as Actions from './actions';
import { ComponentReducer } from './reducer';
import { ComponentSaga } from './saga';
function Component({ }: ComponentProps) {
useInjectReducer({ key: 'Component', reducer: ComponentReducer });
useInjectSaga({ key: 'Component', saga: ComponentSaga });
return <></>;
}
type ComponentProps- = {
// пропс
};
const mapDispatchToProps = (dispatch: Dispatch<ActionType<typeof Actions>>) =>
bindActionCreators(
{
// методы,
},
dispatch,
);
const mapStateToProps = createStructuredSelector({
// селекотры
});
export default connect(mapStateToProps, mapDispatchToProps)(Component);
app.js
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import { PersistGate } from 'redux-persist/integration/react';
import App from './containers/App';
import { configureStore } from '../utils/configureStore';
import { history } from '../appHistory';
const { store, persistor } = configureStore();
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router history={history}>
<App />
</Router>
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root'),
);