在 React Redux 中覆盖状态树

Question

嘿伙计们，我有一个独特的用例，我想从 combineReducer 的一个 reducer 覆盖 redux 中的整个应用程序状态树。目的是我希望能够加载应用程序的不同会话（有点像保存按钮）。

但是我不知道如何解决这个问题，我可以轻松地从 getState 获取整个状态并存储它，但似乎没有人可以设置它。我也试过研究 redux-persist ，但我不太确定如何将持久化对象传递给不同的组件。

任何提示或线索？谢谢

Answer 1

您可以使用高阶 Reducer 来替换整个应用程序的状态。

高阶减速器

参考这个链接。

如果您对此有任何疑问，请在评论中提问。

const {combineReducers, 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 = combineReducers({
    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
})