javascript - img - title html attribute

Reductores reductores anidados

Question

¿Es posible combinar reductores que están anidados con la siguiente estructura:

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

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

Donde el estado tiene la estructura:

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

Donde el auth reductor tiene la estructura:

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

entonces tal vez el operador de propagación es útil? ...auth no estoy seguro :-(

Answer 1

Está perfectamente bien combinar sus reductores anidados utilizando combineReducers . Pero hay otro patrón que es realmente útil: reductores anidados.

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
  }
}

En el ejemplo anterior, authReducer puede reenviar la acción a organisationReducer y userReducer para actualizar alguna parte de su estado.

Answer 2

Inspirado por respuesta de @ , descubrí que también puedes probar esto. No necesariamente mejor que su respuesta, pero creo que es un poco más elegante.

function userReducer(state={}, action) {
    switch (action.type) {
    case SET_USERNAME:
      state.name = action.name;
      return state;
    default:
      return state;
  }
} 

function authReducer(state = {
  token: null,
  cypher: null,
  someKey: null,
}, action) {
  switch (action.type) {
    case SET_TOKEN:
      return {...state, token: action.token}
    default:
      // note: since state doesn''t have "user",
      // so it will return undefined when you access it.
      // this will allow you to use default value from actually reducer.
      return {...state, user: userReducer(state.user, action)}
  }
}

Answer 3

Solo quería dar un poco de información sobre la muy buena respuesta que dio @Florent y señalar que también puede estructurar su aplicación de forma un poco diferente para lograr reductores anidados, al combinar su reductor de raíz con reductores que también son reductores combinados.

Por ejemplo

// 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
});

esto supone un poco diferente de una estructura de estado. En cambio, así:

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

El enfoque de @ Florent probablemente sería mejor si no puede cambiar la estructura del estado, sin embargo