Коннект редьюсеров. Redux

Question

делаю учебный проект на react/redux. Написал два редьюсера:

const currentInputDataReducer = (state = defaultState, action) => {
switch (action.type) {
    ....
    default: {
      return state;
    }
  }
};

const expensesIncomeListReducer = (state = defaultState, action) => {
switch (action.type) {
    ....
    default: {
      return state;
    }
  }
};

Для стейта вида:

const defaultState = {
  calcState: {
    currentInputData: {
      currentDate: '',
      currentMoney: '',
    },
    expensesIncomeList: [],
  },
};

Теперь хочу их скомбенировать и экспортировать:

export default combineReducers({
  currentInputDataReducer,
  expensesIncomeListReducer,
});

Чтобы в index файле создать хранилище:

const store = createStore(rootReducer);

В компоненте использую connect:

export default connect(mapStateToProps, actionCreators)(FormPanel);

В итоге появляется ошибка:

The above error occurred in the <ConnectFunction> component:
in ConnectFunction (created by Calc)
in div (created by Calc)
in Calc (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in div (created by App)
in div (created by App)
in div (created by App)
in App
in Router (created by BrowserRouter)
in BrowserRouter
in Provider

Почему такое может происходить? Это стало появляться после того, как я разделил один редьюсер на два, и применил функцию combineReducers.

Answer 1

При объединении редюсеров главное состояние становится объектом, содержащим состояния этих редюсеров в значениях.

При вызове

combineReducers({
  currentInputDataReducer,
  expensesIncomeListReducer,
});

состояние будет иметь следующий вид:

state = {
  currentInputDataReducer: {<дефолтное состояние редюсера currentInputDataReducer>},
  expensesIncomeListReducer: {<дефолтное состояние редюсера expensesIncomeListReducer>}
}

При разделении состояния на несколько редюсеров нужно это учесть во всех объектах которые используют это состояние. В вашем случае, скорее всего, объект состояния больше недоступен по старом имени типа state.someObject, теперь он должен быть state.currentInputDataReducer.someObject или state.expensesIncomeListReducer.someObject в зависимости от того где именно он оказался после разделения.
Ваши defaultState нужно разделить на два - каждому редюсеру своё.

Имена состояний можно установить при комбинировани редюсеров:

combineReducers({
  current: currentInputDataReducer,
  expenses: expensesIncomeListReducer,
});

БЛОГ НА HUSL

Коннект редьюсеров. Redux

Ответы (1 шт):