Как объединить вложенные редьюсеры?

В своем приложении я хочу получить следующую структуру стейта:

{
  appName: "Вложенные редьюсеры",
  fruits: {
    apples: [
      { id: 0, name: "apple1", saved: true },
      { id: 1, name: "apple2", saved: true }
    ],
    oranges: [
      { id: 0, name: "orange1", saved: true },
      { id: 1, name: "orange2", saved: true }
    ],
    loaded: false,
    saved: true
  }
}

При этом, мне нужно, чтобы за управление стейтом яблок и апельсинов отвечали отдельные редьюсеры.

Подскажите как типизировать и скомбинировать вложенные редьюсеры?

Исходный код: https://stackblitz.com/edit/react-redux-ts-nested-reducers?file=store.ts

Если нажать кнопку test orane reducer то редьюсер апельсинов не сработает.

Как сделать так, чтобы вложенность осталась такой как я описал выше, но при этом orane reducer реагировал на action ?


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