Question

在"Basic Reducer Structure" in Redux docs中，声明：

典型应用的状态形状可能大致如下：

{
    domainData1 : {},
    domainData2 : {},
    appState1 : {},
    appState2 : {},
    ui : {
        uiState1 : {},
        uiState2 : {},
    }
}

或

 { 
    simpleDomainData1: {....}, 
    simpleDomainData2: {....}, 
    entities : { 
        entityType1 : {....}, 
        entityType2 : {....} 
    },
    ui : { 
        uiSection1 : {....}, 
        uiSection2 : {....}, 
    }
}

现在我使用combineReducers，我需要知道如何实现这种结构考虑combineReducers行为，即为传递给combineReducers的每个reducer在 state 对象中设置相应的键。

我是否必须为domainData1，domainData2，appState1，appState2和ui创建一个reducer？或者还有另一种方法来定义像这样的状态？是否可以禁用combineReducers为每个reducer添加键的行为？

Answer 1

combineReducers获取一个充满切片缩减器函数的对象，并且创建一个函数，用于输出相应的状态对象相同的钥匙。

对于redux documentation，这是combine reducer的定义。

我是否必须为domainData1，domainData2，appState1，appState2和ui创建一个reducer？

是的，为每个人定义减速器并为每个减速器组合减速器。喜欢： { domainData1：domainData1Reducer， domainData2：domainData2Reducer， appState1：appState1Reducer， appState2：appState1Reducer ,, ui：uiReducer，

}

是否可以禁用combineReducers将每个缩减器的键添加到状态的行为

不，使用联合减压器，你不能。但是你可以为此编写实现。

还是有另一种方法来定义像这样的状态？是的，我们也可以在单个Reducer中做到这一点。如果你想要的话。

Answer 2

// don't provide keys to reducers that don't supply them
const filterReducer = (reducer) => {
  let lastState = undefined;
  return (state, action) => {
    if (lastState === undefined || state == undefined) {
      lastState = reducer(state, action);
      return lastState;
    }
    var filteredState = {};
    Object.keys(lastState).forEach( (key) => {
      filteredState[key] = state[key];
    });
    var newState = reducer(filteredState, action);
    lastState = newState;
    return newState;
  };
}

Answer 3

这就是我所做的：

首先我创建了simpleDomainData1，simpleDomainData2，entityType1，entityType2以及uiSection1和uiSection2。

然后我合并了entityType1和entityType2，如下所示：

const entities = combineReducers({
    entityType1,
    entityType2,
});

const ui = combineReducers({
  uiSection1,
  uiSection2,
})

或者你可以创建自己的combineReducers函数并使用它：

const entities = (state, action) => {
    entityType1: entityType1(state.entityType1),
    entityType2: entityType2(state.entityType2)
}

const ui = (state, action) => {
    uiSection1: uiSection1(state.uiSection1),
    uiSection2: uiSection2(state.uiSection2)
}

之后：

const allReducers = combineReducers({
    simpleDomainData1,
    simpleDomainData2,
    entities,
    ui    
});

现在州的形状将如下所示：

 { 
    simpleDomainData1: {....}, 
    simpleDomainData2: {....}, 
    entities : { 
        entityType1 : {....}, 
        entityType2 : {....} 
    },
    ui : { 
        uiSection1 : {....}, 
        uiSection2 : {....}, 
    }
}

combineReducer和状态的形状

3 个答案: