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
Share Improve this question asked Jul 1, 2017 at 1:34 LeonLeon 1242 silver badges9 bronze badges2 Answers
Reset to default 7You 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).