在redux中按下重置按钮时如何初始化所有状态

Posted 2023-02-22

【中文标题】在redux中按下重置按钮时如何初始化所有状态

【英文标题】：how to initialise all states when press reset button in redux

【发布时间】：2018-12-05 04:33:06

【问题描述】：

在我的应用程序中，我使用redux 和redux-thunk。RESET 按钮上有，当用户单击它时，我想要INITIALIZE 所有redux 状态而不是window.location.reload()。index.js （reducers 索引文件）

import  combineReducers  from 'redux';
import  reducer as reduxFormReducer  from "redux-form";
import authReducer from './auth_reducer';
import main from './main'
import BookingData from './booking_reducer';
import StepOne from './stepone';
import StepTwo from './stepTwo'

const rootReducer = combineReducers(
    form: reduxFormReducer,
    auth: authReducer,
    Main:main,
    StepOneReducer:StepOne,
    StepTwoReducer:StepTwo,
    BookingData:BookingData,

)

export default rootReducer;

这里每个对象的值都包含单独的reducer文件，每个reducer文件都有状态数App.js （根文件）

import ReactDOM     from "react-dom";
import  Provider  from 'react-redux';
import  createStore, applyMiddleware  from 'redux';
import reduxThunk from 'redux-thunk';
import  composeWithDevTools  from 'redux-devtools-extension';
import AppRouter from './routers/AppRouter';
import reducers from './reducers';
const middleware = [
    reduxThunk,
];

const store = createStore(reducers, composeWithDevTools(
    applyMiddleware(...middleware),
// other store enhancers if any
));



const token = localStorage.getItem('token');
if(token)
    store.dispatch(type:AUTH_USER);


ReactDOM.render(
    <Provider store=store>
        <AppRouter />
    </Provider>
    , document.getElementById('app'));

所以我的问题是，当按下 重置按钮 时，它会调用 action Creator，当涉及到减速器（索引减速器）时，它将调度操作我无法重置所有状态。我也看到了this Question，但在这里我不想更改我的 index reducer 文件结构，因为我需要同时导出这两个文件，而且项目逻辑也会变得一团糟。如何当用户单击重置按钮时，我可以初始化所有 redux 状态吗

【问题讨论】：

在'reset all state'中，你的意思是初始化所有reducer的状态吗？

@Rahamin 是的，想初始化相同的默认 redux 状态

【参考方案1】：

如果我理解正确，那么我在我的应用程序中做了类似的事情：

我通过调度“reset”或“initialize”操作来重置我的整个 redux 状态，并且在所有 reducer 中都有一个用于此操作的案例，我将状态设置为初始值。

【讨论】：

哈哈，现在我也在做同样的事情，但这里是proper的方式，所以想用那个方法解决。

好吧，我没有意识到这一点......不过，我会坚持自己的方式:)

【参考方案2】：

实际上我是在导出AppReducer 而不是rootReducer

import  combineReducers  from 'redux';
import  reducer as reduxFormReducer  from "redux-form";
import authReducer from './auth_reducer';
import main from './main'
import BookingData from './booking_reducer';
import StepOne from './stepone';
import StepTwo from './stepTwo'
import RESET from '../actions/types';
const AppReducer = combineReducers(
    form: reduxFormReducer,
    auth: authReducer,
    Main:main,
    StepOneReducer:StepOne,
    StepTwoReducer:StepTwo,
    BookingData:BookingData,

)

const rootReducer = (state, action) => 
    if (action.type === RESET) 
        console.log('reset action inside root');
        state = undefined
    

    return AppReducer(state, action)


export default rootReducer;

工作Dan Abramov解决方案