Вложенные редукторы

Можно ли комбинировать редукторы, вложенные в следующую структуру:

import 'user' from ...
import 'organisation' from ...
import 'auth' from ...
// ...

export default combineReducers({
  auth: {
    combineReducers({
        user,
        organisation,  
    }),
    auth,
  },
  posts,
  pages,
  widgets,
  // .. more state here
});

Если состояние имеет структуру:

{
    auth: {
        user: {
            firstName: 'Foo',
            lastName: 'bar',
        }
        organisation: {
            name: 'Foo Bar Co.'
            phone: '1800-123-123',
        },
        token: 123123123,
        cypher: '256',
        someKey: 123,
    }
}

Где редуктор auth имеет структуру:

{
    token: 123123123,
    cypher: '256',
    someKey: 123,   
}

так что, может быть, оператор спредов удобен? ...auth не уверен: - (

Ответ 1

Совершенно нормально комбинировать ваши вложенные редукторы с помощью combineReducers. Но есть еще одна модель, которая действительно удобна: вложенные редукторы.

const initialState = {
  user: null,
  organisation: null,
  token: null,
  cypher: null,
  someKey: null,
}

function authReducer(state = initialState, action) {
  switch (action.type) {
    case SET_ORGANISATION:
      return {...state, organisation: organisationReducer(state.organisation, action)}

    case SET_USER:
      return {...state, user: userReducer(state.user, action)}

    case SET_TOKEN:
      return {...state, token: action.token}

    default:
      return state
  }
}

В приведенном выше примере authReducer может перенаправить действие на organisationReducer и userReducer, чтобы обновить часть его состояния.

Ответ 2

Просто хотел немного рассказать о очень хорошем ответе @Florent и указать, что вы можете также структурировать свое приложение немного по-другому, чтобы добиться вложенных редукторов, благодаря тому, что ваш корневой редуктор будет объединен с редукторами, которые также являются комбинированными редукторами

Например

// src/reducers/index.js
import { combineReducers } from "redux";
import auth from "./auth";
import posts from "./posts";
import pages from "./pages";
import widgets from "./widgets";

export default combineReducers({
  auth,
  posts,
  pages,
  widgets
});

// src/reducers/auth/index.js
// note src/reducers/auth is instead a directory 
import { combineReducers } from "redux";
import organization from "./organization";
import user from "./user";
import security from "./security"; 

export default combineReducers({
  user,
  organization,
  security
});

это немного отличается от структуры состояния. Вместо этого:

{
    auth: {
        user: {
            firstName: 'Foo',
            lastName: 'bar',
        }
        organisation: {
            name: 'Foo Bar Co.'
            phone: '1800-123-123',
        },
        security: {
            token: 123123123,
            cypher: '256',
            someKey: 123
        }
    },
    ...
}

Подход @Florent, вероятно, будет лучше, если вы не сможете изменить структуру состояния, однако