reducir

Contenedor de estado de JavaScript que proporciona una gestión de estado predecible. El estado compartido por varios componentes en una aplicación de reacción se puede gestionar de forma centralizada. Redux es una biblioteca de patrones y herramientas que utiliza eventos llamados "acción" para administrar y actualizar el estado de la aplicación. Administra de forma centralizada el estado utilizado en toda la aplicación en una tienda centralizada (almacén centralizado), y sus reglas aseguran que el estado solo puede ser Actualizaciones de forma predecible.

Uso:

• El estado de un componente debe estar disponible (compartido) por otros componentes en cualquier momento.

• Un componente necesita cambiar el estado (comunicación) de otro componente.

Redux es más útil cuando:

• En una gran cantidad de lugares en la aplicación, hay una gran cantidad de estados

• El estado de la aplicación se actualiza con frecuencia a lo largo del tiempo

• La lógica para actualizar ese estado puede ser compleja

• Aplicaciones de tamaño de código mediano y grande, desarrolladas por muchas personas

acción

action es un objeto simple de JavaScript con typecampos . Puede pensar en las acciones como eventos que describen lo que sucedió en su aplicación .

typeEl campo es una cadena que le da a la acción un nombre descriptivo, por ejemplo, "todos/todoAdded". Por lo general, escribimos ese tipo de cadena como "nombre de dominio/evento", donde la primera parte es la característica o categoría a la que pertenece esta acción, y la segunda parte es lo que sucedió.

El objeto de acción puede tener campos adicionales que contienen información adicional sobre lo que sucedió. Por convención, ponemos esta información en payloadun .

Un creador de acciones es una función que crea y devuelve un objeto de acción. Lo que hace es que no tiene que escribir manualmente el objeto de acción cada vez

reductor

Un reductor es una función que toma el objeto actual statey un actionobjeto, decide cómo actualizar el estado si es necesario y devuelve el nuevo estado. La firma de la función es: (state, action) => newState. Puede pensar en un reductor como un detector de eventos que maneja los eventos según el tipo de acción que recibe.

Los reductores deben ajustarse a las siguientes reglas:

• Calcule nuevos valores de estado usando solo los parámetros stateyaction

• Prohibida la modificación directa state. Las actualizaciones inmutables se deben realizar copiando el valor existente statey realizando cambios en el valor copiado .

• Prohíba cualquier lógica asincrónica, código que se base en valores aleatorios o que cause otros "efectos secundarios".

Tienda

El estado de la aplicación Redux actual vive en un objeto llamado store .

La tienda se crea pasando un reductor y tiene getStateun que devuelve el valor del estado actual

La tienda Redux tiene un método llamado dispatch. La única forma de actualizar el estado es llamar store.dispatch()y pasar un objeto de acción . La tienda ejecutará todas las funciones de reducción y calculará el estado actualizado, que getState()se puede .

Despachar una acción puede entenderse vívidamente como "desencadenar un evento" . Algo sucedió y queremos que la tienda lo sepa. Los reductores actúan como detectores de eventos y, cuando reciben una acción de interés, actualizan el estado en respuesta.

const increment = () => {
return {
type: 'counter/increment'
}
}
store.dispatch(increment())
console.log(store.getState())



La función Selector puede extraer el fragmento especificado del árbol de estado de la tienda. A medida que la aplicación crece, encontrará diferentes partes de la aplicación que necesitan leer los mismos datos, los selectores pueden evitar repetir dicha lógica de lectura:
const selectCounterValue = state => state.value
const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2