在 redux 中使用 combineReducer 时如何修复 shapeAssertionError? [英] How to fix shapeAssertionError while using combineReducer in redux?

问题描述

在 redux (redux@3.7.2) 中使用 combineReducer 方法时出现错误.当我只使用一个减速器时，同样的代码也能工作.

I am getting an error while using combineReducer method in redux (redux@3.7.2). Same code will work when I am using only one reducer.

在此处运行代码

代码

const { createStore, combineReducers, applyMiddleware } = require ('redux')

const aReducer = (state, action) => {
    switch (action.type) {
        case 'A':
            {
                return { ...state };
            }
        default: return state;
    }
    return state;
}

const bReducer = (state, action) => {
    switch (action.type) {
        case 'B':
            {
                return { ...state };
            }
        default: return state;
    }
    return state;
}

const configureStore = (initialState) => {


    let rootReducer = combineReducers({ a:aReducer, b:bReducer });
    console.log('configureStore', initialState);
    const str = createStore(rootReducer, initialState);
    return str;
};


const store = configureStore({});

console.log('store',store);

store.subscribe(() => {

    console.log(store.getState());

});

在 create store 行中，如果我将 rootReducer 替换为 aReducer，则此代码不会有任何问题.我不明白为什么减速器返回未定义状态，我将初始状态作为平面对象传递.

In the create store line, if i am replacing the rootReducer to aReducer, this code wont have any problem. I did not understand why the reducers returning undefined state, i am passing initial state as a plane object.

推荐答案

这里有两件事情要做.首先，combineReducers 还将对象中每个 reducer 的状态与参数 reducers 对象的键相同，因此要正确初始化每个状态，您需要:

There are two things going on here. Firstly, combineReducers also combines the states of each reducer in an object with the same keys as the argument reducers object, so to initialize each state correctly you'll need:

const store = configureStore({a: {}, b: {}});

但这还不足以解决问题，因为 combineReducers 还要求每个 reducer 可以处理状态 undefined 并且永远不会返回 undefined(查看文档).如果不能，您会收到此错误:

This is not enough to fix the problem though, as combineReducers also requires that each reducer can handle state undefined and never returns undefined (see the docs). If it can't you get this error:

Error: Reducer "..." returned undefined during initialization. If the state passed to the
reducer is undefined, you must explicitly return the initial state. The initial state may
not be undefined. If you don't want to set a value for this reducer, you can use null
instead of undefined.

令人困惑的是，检查是在调用 combineReducers 时完成的(即在状态初始化之前)，但直到使用 reducer 才会显示错误.这意味着即使您正确初始化状态，并且您的减速器永远不会收到状态 undefined，如果减速器无法处理它，您仍然会收到错误.

The confusing thing about this is that the check is done when combineReducers is called (ie. before state initialization,) but the error isn't shown until the reducer is used. This means that even if you initialize the state correctly, and your reducers never receive state undefined, you'll still get the error if the reducers can't handle it.

要修复它，请替换 (state, action) =>{ 在每个 reducer 中通过 (state = {}, action) =>{，如果 state 是 undefined，则显式返回 null.请注意，这些初始状态仅在您未将初始状态传递给 createStore 时使用.为了防止混淆，我通常在 reducer 中进行所有初始化，而不是在 createStore 中.

To fix it, replace (state, action) => { in each reducer by (state = {}, action) => {, or explicitly return null if state is undefined. Note that these initial states are only used if you don't pass an initial state to createStore. To prevent confusion, I usually do all initialization in the reducers and not at createStore.

这篇关于在 redux 中使用 combineReducer 时如何修复 shapeAssertionError?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！