how to initialise all states when press reset button in redux

Question

in my app i'm using redux with redux-thunk.there is on RESET Button, when user click it i want INITIALIZE all redux state instead of window.location.reload().
index.js (reducers index file)

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;

here each value of object contains separate reducer file and each reducer file has number of states
App.js (root file)

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'));

so my problem is when press Reset Button it will call action Creator, it will dispatch the action when it comes to the reducer(index reducer) I'm unable reset all state.
i saw this Question also but here i don't want to change my index reducer file structure because I need export both and project logic also get mess.
how can i initialize all redux state when user click Reset Button

In 'reset all state', do you mean to initialize the state in all of the reducers? — Yossi, Jun 26 '18 at 12:55

score 1 · Answer 1 · answered Jun 26 '18 at 13:05

1

If I understand you correctly, then I am doing a similar thing in my apps:

I reset my entire redux state by dispatching a 'reset', or 'initialize' action, and have a case in all reducers for this action, where I set the state to the initial values.

answered Jun 26 '18 at 13:05

Yossi

5,577
7
41
76

haha,right now i'm also doing same thing but here is [proper](https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store) way, so want solve using that method. – zulqarnain Jun 26 '18 at 13:11
Well, wasn't aware of that... I will stay with my way, though :) – Yossi Jun 26 '18 at 13:20

score 0 · Answer 2 · answered Jun 27 '18 at 06:22

actually i was exporting AppReducer instead of 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;

worked Dan Abramov solution

how to initialise all states when press reset button in redux

2 Answers2