首页 > 解决方案 > 如何使用 connected-react-router 重置 Redux 存储的状态?

问题描述

我正在尝试实现这种完全相同的行为如何重置 Redux 商店的状态?. 除了我使用的是连接反应路由器。我的配置如下所示:

减速器

export const rootReducer = history => combineReducers({
    auth: auth.reducer,
    router: connectRouter(history),
    authentication: authenticationReducer,
    users: usersReducer,
    project: projectReducer,
    domain: domainReducer,
    test: testReducer
});

店铺

export const history = createBrowserHistory({ basename: '/metro' });

const sagaMiddleware = createSagaMiddleware();
const middleware = [
  ...getDefaultMiddleware({
    immutableCheck: false,
    serializableCheck: false,
    thunk: true
  }),
  sagaMiddleware,
  routerMiddleware(history)
];

const store = configureStore({
  reducer: rootReducer(history),
  middleware,
  devTools: process.env.NODE_ENV !== "production",
  enhancers: [reduxBatch]
});

我试过了,但不起作用:

const appReducer = (state, action, history) => combineReducers({
    auth: auth.reducer,
    router: connectRouter(history),
    authentication: authenticationReducer,
    users: usersReducer,
    project: projectReducer,
    domain: domainReducer,
    test: testReducer
})

export const rootReducer = history => (state, action) => {
    if (action.type === actionTypes.LOGOUT_SUCCESS) {
        state = undefined;
    }
    return appReducer(state, action, history)
};

标签: reactjsreduxreact-reduxredux-storeconnected-react-router

解决方案


这似乎是这个包的一个已知问题。解决方案似乎是将状态设置为一个initialState值,而不是undefined. 唯一需要注意的是,您不应该尝试重新初始化router- 它应该默认执行此操作。

const appReducer = (state, action, history) => combineReducers({
    auth: auth.reducer,
    router: connectRouter(history),
    authentication: authenticationReducer,
    users: usersReducer,
    project: projectReducer,
    domain: domainReducer,
    test: testReducer
})

const initialState = {
    // Don't reset router here
    auth: {},
    authentication: {},
    users: {},
    project: {},
    domain: {},
    test: {}
}

export const rootReducer = history => (state, action) => {
    if (action.type === actionTypes.LOGOUT_SUCCESS) {
        state = initialState;
    }
    return appReducer(state, action, history)
};

推荐阅读