Ir al contenido principal
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 →

Store

Un store contiene todo el árbol de estado de tu aplicación. La única forma de cambiar el estado dentro de él es despachar una acción sobre él, lo que activa la función reductora raíz para calcular el nuevo estado.

Un store no es una clase. Simplemente es un objeto con algunos métodos.

Para crear un store, pasa tu función reductora raíz al método configureStore de Redux Toolkit, que configurará un store de Redux con una buena configuración predeterminada. (Alternativamente, si aún no usas Redux Toolkit, puedes usar el método original createStore, pero te animamos a que migres tu código para usar Redux Toolkit lo antes posible)

Métodos del Store​

getState()​

Devuelve el árbol de estado actual de tu aplicación. Es igual al último valor devuelto por el reducer del store.

Devuelve​

(any): El árbol de estado actual de tu aplicación.

dispatch(action)​

Despacha una acción. Esta es la única forma de provocar un cambio de estado.

La función reductora del store se llamará con el resultado actual de getState() y la action dada de forma síncrona. Su valor de retorno se considerará el siguiente estado. A partir de ahora, se devolverá desde getState() y se notificará inmediatamente a los oyentes de cambios.

precaución

Si intentas llamar a dispatch desde dentro del reducer, lanzará un error que dice "Reducers may not dispatch actions." Los reducers son funciones puras: solo pueden devolver un nuevo valor de estado y no deben tener efectos secundarios (y despachar es un efecto secundario).

En Redux, las suscripciones se llaman después de que el reducer raíz haya devuelto el nuevo estado, por lo que puedes despachar en los oyentes de suscripción. Solo está prohibido despachar dentro de los reducers porque no deben tener efectos secundarios. Si quieres causar un efecto secundario en respuesta a una acción, el lugar correcto para hacerlo es en el action creator potencialmente asíncrono.

Argumentos​

  1. action (Object†): Un objeto simple que describe el cambio que tiene sentido para tu aplicación. Las acciones son la única forma de introducir datos en el store, por lo que cualquier dato, ya sea de eventos de UI, callbacks de red u otras fuentes como WebSockets, debe despacharse eventualmente como acciones. Las acciones deben tener un campo type que indique el tipo de acción que se está realizando. Los tipos se pueden definir como constantes e importarse desde otro módulo. Es mejor usar cadenas para type que Symbols porque las cadenas son serializables. Aparte de type, la estructura de un objeto de acción depende de ti. Si estás interesado, consulta Flux Standard Action para obtener recomendaciones sobre cómo se pueden construir las acciones.

Devuelve​

(Object†): The dispatched action (see notes).

Notas​

† The “vanilla” store implementation you get by calling createStore only supports plain object actions and hands them immediately to the reducer.

Sin embargo, si envuelves createStore con applyMiddleware, el middleware puede interpretar las acciones de manera diferente y proporcionar soporte para despachar acciones asíncronas. Las acciones asíncronas suelen ser primitivas asíncronas como Promesas, Observables o thunks.

El middleware es creado por la comunidad y no viene incluido con Redux por defecto. Debes instalar explícitamente paquetes como redux-thunk o redux-promise para usarlo. También puedes crear tu propio middleware.

Para aprender a describir llamadas API asíncronas, leer el estado actual dentro de creadores de acciones, realizar efectos secundarios o encadenarlos para ejecutarse en secuencia, consulta los ejemplos de applyMiddleware.

Ejemplo​

import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux'])

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))

subscribe(listener)​

Añade un listener de cambios. Se llamará cada vez que se despache una acción y alguna parte del árbol de estado pueda haber cambiado. Puedes llamar a getState() dentro de la callback para leer el árbol de estado actual.

Puedes llamar a dispatch() desde un listener de cambios, con las siguientes advertencias:

  1. El listener solo debe llamar a dispatch() en respuesta a acciones del usuario o bajo condiciones específicas (por ejemplo, despachar una acción cuando el store tenga un campo específico). Llamar a dispatch() sin condiciones es técnicamente posible, pero genera un bucle infinito ya que cada llamada a dispatch() normalmente activa el listener nuevamente.

  2. Las suscripciones se capturan justo antes de cada llamada a dispatch(). Si te suscribes o cancelas la suscripción mientras se están invocando los listeners, esto no afectará al dispatch() en curso. Sin embargo, la próxima llamada a dispatch(), ya sea anidada o no, usará una instantánea más reciente de la lista de suscripciones.

  3. El listener no debe esperar ver todos los cambios de estado, ya que el estado pudo actualizarse múltiples veces durante un dispatch() anidado antes de invocar al listener. Sin embargo, se garantiza que todos los suscriptores registrados antes de iniciar el dispatch() serán llamados con el último estado cuando finalice.

Es una API de bajo nivel. Normalmente, en lugar de usarla directamente, usarás bindings de React (u otros). Si usas comúnmente la callback como hook para reaccionar a cambios de estado, quizá quieras escribir un utilitario personalizado observeStore. El Store también es un Observable, por lo que puedes subscribe a cambios con librerías como RxJS.

Para cancelar la suscripción del listener de cambios, invoca la función devuelta por subscribe.

Argumentos​

  1. listener (Function): La callback que se invocará cuando se haya despachado una acción y el árbol de estado pueda haber cambiado. Puedes llamar a getState() dentro de esta callback para leer el árbol de estado actual. Es razonable esperar que el reducer del store sea una función pura, por lo que puedes comparar referencias en rutas profundas del árbol de estado para detectar cambios.
Devuelve​

(Function): Función que cancela la suscripción del listener de cambios.

Ejemplo​
function select(state) {
  return state.some.deep.property
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())

  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}

const unsubscribe = store.subscribe(handleChange)
unsubscribe()

replaceReducer(nextReducer)​

Reemplaza el reducer que el store usa actualmente para calcular el estado.

Es una API avanzada. Puedes necesitarla si tu aplicación implementa code splitting y quieres cargar algunos reducers dinámicamente. También si implementas hot reloading para Redux.

Argumentos​

  1. nextReducer (Function) El próximo reducer que usará el store.