Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

combineReducers(reducers)

Resumen

La función auxiliar combineReducers convierte un objeto cuyos valores son diferentes funciones "reductoras por sección" en un único reductor combinado que puedes pasar a configureStore de Redux Toolkit (o al método heredado createStore).

El reductor combinado resultante llama a cada reductor por sección cada vez que se despacha una acción, y agrupa sus resultados en un único objeto de estado. Esto permite dividir la lógica del reductor en funciones separadas, cada una gestionando su propia sección del estado de forma independiente.

consejo

Normalmente no necesitarás esto: el método configureStore de Redux Toolkit llamará automáticamente a combineReducers por ti si pasas un objeto de reductores por sección:

const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer
  }
})

Aún puedes llamar a combineReducers() manualmente si necesitas construir primero el reductor raíz.

Secciones de estado

El estado producido por combineReducers() organiza los estados de cada reductor bajo las claves que se pasaron a combineReducers()

Ejemplo:

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// This would produce the following state object
{
  potato: {
    // ... potatoes, and other state managed by the potatoReducer ...
  },
  tomato: {
    // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice sauce? ...
  }
}

Puedes controlar los nombres de las claves de estado usando claves diferentes para los reductores en el objeto pasado. Por ejemplo, puedes llamar combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) para que la forma del estado sea { todos, counter }.

Argumentos

1. reducers (Objeto): Un objeto cuyos valores corresponden a diferentes funciones reductoras que deben combinarse en una.

combineReducers({
  posts: postsReducer,
  comments: commentsReducer
})

Consulta las notas a continuación para conocer las reglas que debe seguir cada reductor pasado.

Devuelve

(Función): Un reductor que invoca cada reductor dentro del objeto reducers y construye un objeto de estado con la misma estructura.

Notas

Esta función tiene ciertas opiniones diseñadas para ayudar a principiantes a evitar errores comunes. Por eso intenta imponer reglas que no necesitas seguir si escribes el reductor raíz manualmente.

Cualquier reductor pasado a combineReducers debe cumplir estas reglas:

• Para cualquier acción no reconocida, debe devolver el state que recibió como primer argumento.

• Nunca debe devolver undefined. Es muy fácil hacer esto por error mediante una sentencia return prematura, por lo que combineReducers lanzará un error si lo haces, en lugar de permitir que el error se manifieste en otro lugar.

• Si el state recibido es undefined, debe devolver el estado inicial para este reductor específico. Según la regla anterior, el estado inicial tampoco debe ser undefined. Es útil especificarlo con sintaxis de argumentos opcionales, pero también puedes verificar explícitamente si el primer argumento es undefined.

Aunque combineReducers intenta verificar que tus reductores cumplen estas reglas, debes recordarlas y seguirlas. combineReducers verificará tus reductores pasándoles undefined; esto se hace incluso si especificas un estado inicial en Redux.createStore(combineReducers(...), initialState). Por lo tanto, debes asegurarte de que tus reductores funcionen correctamente al recibir undefined como estado, incluso si no planeas que reciban undefined en tu propio código.

Ejemplo

reducers/todos.js

export default function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

reducers/counter.js

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

reducers/index.js

import { combineReducers } from '@reduxjs/toolkit'
import todos from './todos'
import counter from './counter'

export default combineReducers({
  todos,
  counter
})

App.js

import { configureStore } from '@reduxjs/toolkit'
import reducer from './reducers/index'

const store = configureStore({
  reducer
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
// }

store.dispatch({
  type: 'ADD_TODO',
  text: 'Use Redux'
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: [ 'Use Redux' ]
// }

Consejos

• ¡Esta función auxiliar es solo una comodidad! Puedes escribir tu propio combineReducers que funcione de manera diferente, o incluso ensamblar manualmente el objeto de estado a partir de los reducers hijos y escribir explícitamente una función reducer raíz, como harías con cualquier otra función.

• Puedes invocar combineReducers en cualquier nivel de la jerarquía de reducers. No tiene que ocurrir en el nivel superior. De hecho, puedes usarla nuevamente para dividir reducers hijos que se vuelvan demasiado complejos en reducers nietos independientes, y así sucesivamente.