Question

在我的应用中，我将redux与redux-thunk配合使用。 RESET 按钮上有一个按钮，当用户单击它时，我希望INITIALIZE处于所有还原状态的window.location.reload()。
index.js （减速器索引文件）

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;

这里，对象的每个值都包含单独的化简文件，并且每个化简文件具有状态数
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，当涉及到我无法重置所有状态的reducer（index reducer）时，它将调度该动作。
我也看到了this Question，但是在这里我不想更改索引缩减器的文件结构，因为我既需要导出，又会导致项目逻辑混乱。
当用户单击“重置按钮”时，我如何初始化所有redux状态

Answer 1

如果我对您的理解正确，那么我正在我的应用中执行类似的操作：

我通过调度一个“重置”或“初始化”操作来重置我的整个redux状态，并且在所有化简器中都有一个针对该操作的案例，其中我将状态设置为初始值。

Answer 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解决方案

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

2 个答案: