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 →

createStore(reducer, preloadedState?, enhancer?)

Crea un almacén Redux que contiene el árbol de estado completo de tu aplicación. Debe existir un único almacén en tu aplicación.

peligro

¡El método original createStore de Redux está obsoleto!

createStore seguirá funcionando indefinidamente, pero desaconsejamos el uso directo de createStore o del paquete redux original.

En su lugar, deberías usar el método configureStore de nuestro paquete oficial Redux Toolkit, que envuelve createStore para ofrecer una configuración predeterminada mejorada. También deberías usar el método createSlice de Redux Toolkit para escribir la lógica de los reductores.

Redux Toolkit también reexporta todas las demás APIs incluidas en el paquete redux.

Consulta la página Migración a Redux Moderno para detalles sobre cómo actualizar tu código base de Redux heredado.

Argumentos

1. reducer (Función): Un reductor raíz que devuelve el siguiente árbol de estado, dado el estado actual y una acción a gestionar.

2. [preloadedState] (cualquiera): El estado inicial. Opcionalmente puedes especificarlo para hidratar el estado desde el servidor en aplicaciones universales, o para restaurar una sesión de usuario serializada previamente. Si generaste reducer con combineReducers, debe ser un objeto plano con la misma estructura que las claves pasadas. De lo contrario, puedes pasar cualquier cosa que tu reducer pueda entender.

3. [enhancer] (Función): Potenciador del almacén. Opcionalmente puedes especificarlo para añadir capacidades como middleware, viajes en el tiempo, persistencia, etc. El único potenciador incluido en Redux es applyMiddleware().

Devuelve

(Store): Un objeto que contiene el estado completo de tu aplicación. La única forma de cambiar su estado es despachando acciones. También puedes suscribirte a los cambios para actualizar la UI.

Ejemplo

import { createStore } from 'redux'

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

const store = createStore(todos, ['Use Redux'])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]

Obsolecencia y exportación alternativa legacy_createStore

En Redux 4.2.0, marcamos el método original createStore como @deprecated. Técnicamente no es un cambio radical, ni es nuevo en la 5.0, pero lo documentamos aquí para completitud.

Esta obsolescencia es solo un indicador visual para incentivar la migración de patrones Redux heredados a las APIs modernas de Redux Toolkit. Resulta en un tachado visual al importar y usar, como createStore, pero sin errores ni advertencias en tiempo de ejecución.

createStore seguirá funcionando indefinidamente y nunca será eliminado. Pero hoy queremos que todos los usuarios de Redux utilicen Redux Toolkit para su lógica.

Para solucionarlo, hay tres opciones:

• Sigue nuestra recomendación de migrar a Redux Toolkit y configureStore

• No hacer nada. Es solo un tachado visual y no afecta el comportamiento. Ignóralo.

• Usar la API legacy_createStore ahora exportada, que es la misma función sin la etiqueta @deprecated. La opción más simple es un alias al importar: import { legacy_createStore as createStore } from 'redux'

Consejos

• ¡No crees múltiples almacenes en una aplicación! Usa combineReducers para crear un único reductor raíz.

• El estado de Redux normalmente son objetos y arrays simples de JavaScript.

• Si tu estado es un objeto plano, ¡nunca lo mutations! Las actualizaciones inmutables requieren copiar cada nivel de datos, típicamente con el operador de propagación (return { ...state, ...newData }).

• En aplicaciones universales que se ejecutan en servidor, crea una instancia del almacén por cada petición para aislarlas. Despacha acciones de obtención de datos y espera su completado antes de renderizar.

• Al crear un almacén, Redux despacha una acción ficticia para poblar el estado inicial. No debes manejar esta acción directamente. Recuerda que tu reductor debe devolver un estado inicial si el primer argumento es undefined.

• Para aplicar múltiples store enhancers, puedes usar compose().