Как я могу использовать зерноуборочные комбайны и редукторы вместе?

Question

Как я могу использовать зерноуборочные комбайны и редукторы вместе? Я хочу использовать какой-то редуктор в качестве комбайна, но мне также нужен какой-то редуктор, который должен управлять всем состоянием (не только частью, как в combReducer). Я пытаюсь использовать:

const combinedReducers = combineReducers({reducerA});
export const reducers= reduceReducers(combinedReducers, reducerB);

Для той же структуры: interface State{ reducerAState: reducerA; reducerBState: reducerB; }

Но в этом случае ReducerA перезаписывает все состояния только самостоятельно, без предыдущего состояния.

Answer 1

Это не осуществимо таким образом. Редуктор сделан combineReducers удалит части состояния с ключами, которые не были частью его карты ключей инициализации-редукторов. Это то, что вы испытываете, и именно так оно и работает.

Если вы действительно должны придерживаться обоих combineReducers а также reducerReducers чтобы решить вашу задачу, вам нужно будет реализовать 3 редуктора: один для слайса A, один для слайса B и один, который будет работать с ними обоими:

const sliceA = (state, action) => state + `| ${action.type} by A`;
const sliceB = (state, action) => state + `| ${action.type} by B`;
const full = (state, action) => ({ sliceA: state.sliceA + `| ${action.type} by C`, sliceB: state.sliceB + `| ${action.type} by C` });

const reducer = reduceReducers(
  combineReducers({ 
    sliceA,
    sliceB,
  }),
  full
);

const initialState = { sliceA: 'initial A', sliceB: 'initial B' };
const action = { type: 'touched' };

console.log(reducer(initialState, action));

// outputs:

Object {
  sliceA: "initial A| touched by A| touched by C",
  sliceB: "initial B| touched by B| touched by C"
}

Но может быть проще просто написать это самостоятельно:

const sliceA = (state, action) => state + `| ${action.type} by A`;
const sliceB = (state, action) => ({ 
  sliceA: state.sliceA + `| ${action.type} by B`, 
  sliceB: state.sliceB + `| ${action.type} by B`, 
})

const reducer = (state, action) => sliceB(
  {
    sliceA: sliceA(state.sliceA, action),
    sliceB: state.sliceB,
  }, 
  action
)
const initialState = { sliceA: 'initial A', sliceB: 'initial B' };
const action = { type: 'touched' };

console.log(reducer(initialState, action));

// outputs:
Object {
  sliceA: "initial A| touched by A| touched by B",
  sliceB: "initial B| touched by B"
}