Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Glosario
Este es un glosario de los términos principales de Redux, junto con sus firmas de tipo. Los tipos están documentados usando Flow notation.
State
type State = any
State (también llamado state tree) es un término amplio, pero en la API de Redux normalmente se refiere al valor de estado único gestionado por el store y devuelto por getState(). Representa el estado completo de una aplicación Redux, que suele ser un objeto profundamente anidado.
Por convención, el estado de nivel superior es un objeto u otra colección clave-valor como un Map, pero técnicamente puede ser de cualquier tipo. Aún así, deberías esforzarte por mantener el estado serializable. No incluyas nada que no puedas convertir fácilmente a JSON.
Action
type Action = Object
Una action es un objeto simple que representa una intención de cambiar el estado. Las actions son la única forma de introducir datos en el store. Cualquier dato, ya sea de eventos de UI, callbacks de red u otras fuentes como WebSockets, debe despacharse eventualmente como actions.
Las actions deben tener un campo type que indique el tipo de acción que se realiza. Los tipos pueden definirse como constantes e importarse desde otro módulo. Es mejor usar strings para type que Symbols porque los strings son serializables.
Aparte del type, la estructura de un objeto de acción depende totalmente de ti. Si te interesa, consulta Flux Standard Action para ver recomendaciones sobre cómo construir actions.
Consulta también async action más abajo.
Reducer
type Reducer<S, A> = (state: S, action: A) => S
Un reducer es una función que acepta un valor acumulado y un nuevo valor, y devuelve un nuevo valor acumulado. Se usan para reducir una colección de valores a un único valor.
Los reducers no son exclusivos de Redux: son un concepto fundamental de programación funcional. Incluso la mayoría de lenguajes no funcionales como JavaScript tienen una API incorporada para reducción. En JavaScript es Array.prototype.reduce().
En Redux, el valor acumulado es el objeto de estado, y los valores que se acumulan son actions. Los reducers calculan un nuevo estado basándose en el estado anterior y una acción. Deben ser funciones puras: funciones que devuelven exactamente la misma salida para las mismas entradas. Además, deben estar libres de efectos secundarios. Esto es lo que permite características potentes como hot reloading y time travel.
Los reducers son el concepto más importante en Redux.
No hagas llamadas API en los reducers.
Dispatching Function
type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
Una dispatching function (o simplemente dispatch function) es una función que acepta una action o una async action, y que puede despachar o no una o más actions al store.
Debemos distinguir entre las funciones de despacho en general y la función base dispatch proporcionada por la instancia del store sin middleware.
La función base de despacho siempre envía una acción de forma síncrona al reducer del store, junto con el estado anterior devuelto por el store, para calcular un nuevo estado. Espera que las actions sean objetos simples listos para ser consumidos por el reducer.
El Middleware envuelve la función base de despacho. Permite que la función de despacho maneje async actions además de actions. El middleware puede transformar, retrasar, ignorar o interpretar actions o async actions antes de pasarlas al siguiente middleware. Consulta más abajo para más información.
Action Creator
type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction
Un action creator es, simplemente, una función que crea una acción. No confundas ambos términos: una acción es un conjunto de información, mientras que un action creator es una fábrica que produce acciones.
Invocar un action creator solo genera una acción, pero no la despacha. Debes llamar a la función dispatch del store para realizar realmente la modificación. A veces usamos action creators vinculados para referirnos a funciones que llaman a un action creator y despachan inmediatamente su resultado a una instancia específica del store.
Si un action creator necesita leer el estado actual, realizar una llamada API o causar efectos secundarios (como transiciones de navegación), debe devolver una acción asíncrona en lugar de una acción normal.
Acción asíncrona
type AsyncAction = any
Una acción asíncrona es un valor enviado a una función de despacho que aún no está listo para ser procesado por el reducer. Será transformado por un middleware en una acción (o serie de acciones) antes de llegar a la función base dispatch(). Las acciones asíncronas pueden tener distintos tipos según el middleware usado. Suelen ser primitivas asíncronas como Promesas o thunks, que no se pasan inmediatamente al reducer pero desencadenan despachos de acciones al completarse una operación.
Middleware
type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch
Un middleware es una función de orden superior que compone una función de despacho para devolver una nueva función de despacho. Normalmente transforma acciones asíncronas en acciones regulares.
Los middleware son componibles mediante composición funcional. Son útiles para registrar acciones, realizar efectos secundarios (como navegación) o convertir llamadas API asíncronas en series de acciones síncronas.
Consulta applyMiddleware(...middlewares) para un análisis detallado de los middleware.
Store
type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}
Un store es un objeto que contiene el árbol de estado de la aplicación. Debe haber solo un store en una app Redux, ya que la composición ocurre a nivel del reducer.
-
dispatch(action)es la función de despacho base mencionada anteriormente. -
getState()devuelve el estado actual del store. -
subscribe(listener)registra una función para ejecutar en cambios de estado. -
replaceReducer(nextReducer)se usa para hot reloading y code splitting. Es poco probable que lo necesites.
Consulta la referencia completa de la API del store para más detalles.
Creador de store
type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store
Un creador de store es una función que crea un store de Redux. Al igual que con las funciones de despacho, distinguimos entre el creador base createStore(reducer, preloadedState) exportado por Redux, y los creadores devueltos por los store enhancers.
Store enhancer
type StoreEnhancer = (next: StoreCreator) => StoreCreator
Un store enhancer es una función de orden superior que compone un creador de stores para devolver un nuevo creador mejorado. Es similar al middleware: permite modificar la interfaz del store de forma componible.
Los store enhancers son análogos a los componentes de orden superior en React, que a veces también se llaman "component enhancers".
Como un store no es una instancia sino una colección de funciones en objeto simple, se pueden crear y modificar copias fácilmente sin alterar el original. Hay un ejemplo en la documentación de compose que lo demuestra.
Es poco probable que escribas un store enhancer, pero puedes usar el de las herramientas de desarrollo. Esto permite el time travel sin que la app sea consciente. Curiosamente, la implementación de middleware de Redux es en sí misma un store enhancer.