ReplaceReducer导致意外的密钥错误

Question

我有一个动态加载模块的React应用程序,包括模块的reducer函数,然后调用Redux的replaceReducer来替换reducer.不幸的是我收到了错误

在initialState参数中找到意外的键"bookEntry"传递给createStore.预计会找到一个已知的reducer键:"bookList","root".意外的键将被忽略.

bookEntry 是旧版减速机的关键所在.从bookEntry模块开始并切换到bookList会导致此反向错误

在initialState参数中找到的意外键"bookList"传递给createStore.预计会找到一个已知的reducer密钥:"bookEntry","root".意外的键将被忽略.

代码如下 - 未注释评论代码实际上解决了这个问题,但我猜测它不应该被需要.

我在做Redux的其他问题是否需要使用此代码？

function getNewReducer(reducerObj){
    if (!reducerObj) return Redux.combineReducers({ root: rootReducer });

    //store.replaceReducer(function(){
    //    return {
    //        root: rootReducer()
    //    }
    //});

    store.replaceReducer(Redux.combineReducers({
        [reducerObj.name]: reducerObj.reducer,
        root: rootReducer
    }));
}

Answer 1

通常,我们不建议您在更改路径或加载新模块时"清理"数据.这使得应用程序的可预测性降低一些.如果我们谈论成千上万的记录,那么肯定.这是您计划加载的数据量吗？

如果每个页面上只有几千个项目,那么卸载它们没有任何好处,并且存在与添加到应用程序的复杂性相关的缺点.因此,请确保您正在解决一个真正的问题,而不是过早地进行优化.

现在,到警告信息.检查在里面定义combineReducers().这意味着将丢弃意外的状态键.在删除了bookEntry托管的reducer之后,state.bookEntry新的根reducer不再识别该部分状态,并combineReducers()记录了它将被丢弃的警告.请注意,这是一个警告,而不是错误.你的代码运行得很好.我们使用console.error()警告突出,但它实际上没有扔,所以你可以放心地忽略它.

我们并不真的想要使警告可配置,因为您实际上是隐式删除部分应用程序状态.通常人们会误做,而不是故意这样做.所以我们想对此发出警告.如果您想绕过警告,最好的办法是combineReducers()手动编写根减速器(当前生成).它看起来像这样:

// I renamed what you called "root" reducer
// to "main" reducer because the root reducer
// is the combined one.
let mainReducer = (state, action) => ...

// This is like your own combineReducers() with custom behavior
function getRootReducer(dynamicReducer) {
  // Creates a reducer from the main and a dynamic reducer
  return function (state, action) {
    // Calculate main state
    let nextState = {
      main: mainReducer(state.main, action)
    };

    // If specified, calculate dynamic reducer state
    if (dynamicReducer) {
      nextState[dynamicReducer.name] = dynamicReducer.reducer(
        nextState[dynamicReducer.name],
        action
      );
    }

    return nextState;
  };
}

// Create the store without a dynamic reducer
export function createStoreWithoutDynamicReducer() {
  return Redux.createStore(getRootReducer());
}

// Later call this to replace the dynamic reducer on a store instance
export function setDynamicReducer(store, dynamicReducer) {
  store.replaceReducer(getRootReducer(dynamicReducer));
}

然而,我们建议的模式是保持旧的减速器.