Hey guys so I have a unique use case where I want to override the entire app state tree in redux from one of the reducers from bineReducer. Purpose being I want to be able to load a different session of the app (kinda like a save button).

However I don't know how to go about this, I can easily get the entire state from getState and store it but there doesn't seem to be one to set it. I've also tried looking into redux-persist but I'm not too sure how to pass the persister object to different ponent.

Any hints or clue? Thanks

Hey guys so I have a unique use case where I want to override the entire app state tree in redux from one of the reducers from bineReducer. Purpose being I want to be able to load a different session of the app (kinda like a save button).

However I don't know how to go about this, I can easily get the entire state from getState and store it but there doesn't seem to be one to set it. I've also tried looking into redux-persist but I'm not too sure how to pass the persister object to different ponent.

Any hints or clue? Thanks

• javascript
• reactjs
• redux

2 Answers 2

You can use Higher Order Reducer to replace whole the app's state.

Higher Order Reducer

Refer this link.

If you have any doubt on this ask that in ments.

const {bineReducers, createStore} = require('redux');

function todos(state=[], action){
    switch (action.type) {
        case 'ADD_TODO':
            return [...state, action.data];
        default:
            return state;
    }
}

var state = {
    todos: ['todo1']
}

var reducers = bineReducers({
    todos: todos
});

var store = createStore(HigherOrderReducer(reducers), state);

function HigherOrderReducer(reducers, initialState){
    let higherState = {
        state: initialState
    }
    return function(state = {}, action){
        switch (action.type) {
            case 'REPLACE_WHOLE_STATE':
                higherState.state = action.data;
                return higherState.state;
            default:
                return reducers(state, action);
        }
    }
}

store.subscribe(function(){
    console.log(store.getState());
})

store.dispatch({
    type: 'ADD_TODO',
    data: 'todo2'
})

var newState = {
    todos: ['task1', 'task2']
}

store.dispatch({
    type: 'REPLACE_WHOLE_STATE',
    data: newState
})

You should be able to replace the entire state in the reducer itself. So, instead of doing something like object.assign({}, state, {...}) you would just return newState.

If what you are trying to do is to pletely replace the state from the root-reducer level, you can write a conditional based on the bined states.

bineReducer(AReducer, BReducer, (CReducer.someCondition? CReducer : DReducer))

It's all just javascript. An alternative to all this is to use reduce-reducers to merge and generate a new state at whichever level you choose (root reducer or reducer).