我已经为这个问题苦苦挣扎了两天,所以我需要帮助!
我有一个React网站,正如文档所说,我已经添加了Redux Persist(也用于处理请求的Redux Saga)。
我正在测试一个中间没有任何传奇的商店,当我触发一个动作时,数据会更新,我可以在调试器中看到它,但是当我刷新时,尽管有Redux Hydrate流程运行,该值将恢复为默认值。
store.js
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga'
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import rootReducer from './reducers';
// import rootSaga from './sagas';
const persistConfig = {
key: 'root',
storage: storage,
// whitelist: ['login', 'account', 'layout'],
stateReconciler: autoMergeLevel2, // see "Merge Process" section for details.
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const sagaMiddleware = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(sagaMiddleware)));
const persistor = persistStore(store);
export { store, persistor, sagaMiddleware };
reducers.js
import { combineReducers } from 'redux';
// Front
import layout from './layout/reducer';
// Authentication Module
import account from './auth/register/reducer';
import login from './auth/login/reducer';
import forget from './auth/forgetpwd/reducer';
const rootReducer = combineReducers({
layout,
account,
login,
forget
});
export default rootReducer;
reducer.js(我正在测试的那个,布局)
import { ACTIVATE_AUTH_LAYOUT, ACTIVATE_NON_AUTH_LAYOUT, TOGGLE, TOGGLE_LD } from './actionTypes';
const initialState={
topbar:true,
sidebar:true,
footer:true,
is_toggle : true,
is_light : true
}
const layout = (state=initialState,action) => {
switch(action.type){
case ACTIVATE_AUTH_LAYOUT:
state = {
...state,
...action.payload
}
break;
case ACTIVATE_NON_AUTH_LAYOUT:
state = {
...state,
...action.payload
}
break;
case TOGGLE:
state = {
...state,
is_toggle : action.payload
}
break;
case TOGGLE_LD:
state = {
...state,
is_light : action.payload
}
break;
default:
// state = state;
break;
}
return state;
}
export default layout;
actions.js
import { ACTIVATE_AUTH_LAYOUT, ACTIVATE_NON_AUTH_LAYOUT, TOGGLE, TOGGLE_LD } from './actionTypes';
export const activateAuthLayout = () => {
return {
type: ACTIVATE_AUTH_LAYOUT,
payload: {
topbar: true,
sidebar: true,
footer: true,
rodri: 'butta',
layoutType: 'Auth'
}
}
}
export const activateNonAuthLayout = () => {
return {
type: ACTIVATE_NON_AUTH_LAYOUT,
payload: {
topbar: false,
sidebar: false,
footer: false,
layoutType: 'NonAuth'
}
}
}
export const toggleSidebar = (is_toggle) => {
return {
type: TOGGLE,
payload: is_toggle
}
}
export const toggleLightDark = (is_light) => {
return {
type: TOGGLE_LD,
payload: is_light
}
}
index.js(APP)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import rootSaga from './store/sagas';
import {persistor, store, sagaMiddleware} from './store';
sagaMiddleware.run(rootSaga);
const app = (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<BrowserRouter>
<App />
</BrowserRouter>
</PersistGate>
</Provider>
);
ReactDOM.render(app, document.getElementById('root'));
serviceWorker.unregister();
以及该类的片段
...
this.props.toggleSidebar(!this.props.is_toggle);
...
const mapStatetoProps = state => {
const { is_toggle,is_light } = state.layout;
return { is_toggle,is_light };
}
export default withRouter(connect(mapStatetoProps, { toggleSidebar })(Topbar));
调试器
首次运行时,当我切换菜单栏时,会触发该操作)
刷新浏览器后,重新水化处理应使布局-> is_toggle为false ..但它仍然为true(默认情况下)
彩色碎片
答案 0 :(得分:3)
我认为您的问题是如何设置store
:
const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(sagaMiddleware)));
此函数的结构为createStore(reducer, [preloadedState], [enhancer])
因此,您尝试将enhancers
传递为preloadedState
。
尝试将其更改为此:
const store = createStore(persistedReducer, {}, composeEnhancers(applyMiddleware(sagaMiddleware)));
此外,当您设置persistConfig
时,我看到您已将白名单注释掉。您要保留的任何减速器状态都必须在此列表中,因此不应将其注释掉:
// whitelist: ['login', 'account', 'layout'], // uncomment this
最后,请注意,您并不需要在所有切换案例中都使用break