Reactjs react/redux/immutable/redux persist:不持久化到本地存储
搜索,只找到与我的问题松散相关的问题 有一个redux应用程序,其中状态由不可变记录组成 希望仅将我的状态的一个子集序列化/反序列化到localstorage:Reactjs react/redux/immutable/redux persist:不持久化到本地存储,reactjs,redux,immutable.js,redux-persist,Reactjs,Redux,Immutable.js,Redux Persist,搜索,只找到与我的问题松散相关的问题 有一个redux应用程序,其中状态由不可变记录组成 希望仅将我的状态的一个子集序列化/反序列化到localstorage: \Application <- Immutable Record \user <- regular js object \... \... 现在,这不仅没有将任何数据持久化到我的本地存储中,它还以某种方式强制我的所有状态都为null,因此,例如,应用程序没有子级,而我希望有一个用户 如何正确配置我的conf
\Application <- Immutable Record
\user <- regular js object
\...
\...
现在,这不仅没有将任何数据持久化到我的本地存储中,它还以某种方式强制我的所有状态都为null
,因此,例如,应用程序
没有子级,而我希望有一个用户
如何正确配置我的configureStore
以仅保留应用程序/用户
对象?我需要更新我的configureStore
,如下所示:
import {
compose, createStore, applyMiddleware, combineReducers,
} from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import immutableTransform from 'redux-persist-transform-immutable';
import { Application } from '../modules/application/records/application';
import rootReducer from '../modules/reducers';
const persistConfig = {
transforms: [immutableTransform()],
key: 'root',
whitelist: 'application',
storage,
};
const history = createHistory();
const reduxRouterMiddleware = routerMiddleware(history);
const reducer = combineReducers({
...rootReducer,
routing: routerReducer,
});
const persistedReducer = persistReducer(persistConfig, reducer);
const createStoreWithMiddleware = compose(
applyMiddleware(thunkMiddleware, reduxRouterMiddleware, createLogger()),
window.devToolsExtension ? window.devToolsExtension({ trace: true }) : f => f,
)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(persistedReducer, initialState);
// reduxRouterMiddleware.listenForReplays(store);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../modules/reducers', () => {
const nextRootReducer = require('../modules/reducers');
store.replaceReducer(nextRootReducer);
});
}
const persister = persistStore(store);
return { store, persister };
}
因为我在React项目中,我还需要更新我的路由以使用PersistGate
元素:
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import configureStore from './client/store/configureStore';
const { store, persister } = configureStore();
const { dispatch } = store;
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persister}>
<BrowserRouter>
{Routes here...}
</BrowserRouter>
</PersistGate>
</Provider>,
document.getElementById('root'),
);
dispatch(actions.initializeApp());
从“React”导入React;
从'react dom'导入{render};
从“react router dom”导入{BrowserRouter};
从'react redux'导入{Provider};
从'redux persist/integration/react'导入{PersistGate};
从“/client/store/configureStore”导入configureStore;
const{store,persister}=configureStore();
const{dispatch}=store;
渲染(
{这里的路线…}
,
document.getElementById('root'),
);
分派(actions.initializeApp());
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import configureStore from './client/store/configureStore';
const { store, persister } = configureStore();
const { dispatch } = store;
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persister}>
<BrowserRouter>
{Routes here...}
</BrowserRouter>
</PersistGate>
</Provider>,
document.getElementById('root'),
);
dispatch(actions.initializeApp());