React Redux[EN][ES]

To install redux on your React App you will need:

npm install redux react-redux --save

It’s based on three principles to manage the flow of events that change data from the UI to the Base Store without deleting other elements. It’s based in Flux and it has three principles that will follow:

• A store as the main source of truth, this means there will be only one storage of states
• The state is only readable, the object will tell if the state may change
• Pure functions, that will read the last state and send a new value in function its criteria.

Flux is a system of management of data/information, that consists of a unidirectional line where the UI (Fronted) emit actions (Provider) to a Store that stores the data of the component and depending on what the provider brings, it updates the data and sends a notification to the emission component so this can update with the new state.

We want to wrap the whole App three of components inside the Provider because it is the connection with the store, the source of truth, where the state of the App’s components is. This has a unique attribute that is the store.

Basically, as its name indicates it keeps the state of the App’s components. Easy, but the complexity is in its creation. It requires a function createStore, that has two arguments a reducer and the storage of data that you should initialize beforehand.

What is does the reducer do? well, it receives two parameters, an actual state and the action which is an object with a type (of action) and a payload (the state wishes to change). With this, the reducer filters the action by a switch and with the payload, it applies changes to the data. BUT… the store must keep immutable so we use spread operators to choose the specific state and apply changes. Also, you can use the Object. assing.

Reducer: Let’s say it is close to the store and manage to change states the actions indicate using the switch as a filter.

Action: It contains the payload that can be the state or states the UI interacted to change and normally it has an ID that is its type, so the reducer will identify what kind of action the client wants to make on the store.

Here you will find more and with examples about reducers, actions, deploys, types.
[ES]
_Para instalar redux en su aplicación React, necesitará: _
’‘
npm install redux react-redux --save
’’

Se basa en tres ** principios ** para administrar el flujo de eventos que cambian los datos de la interfaz de usuario a la Tienda base sin eliminar otros elementos. Está basado en [Flux] (https://carlosazaustre.es/como-funciona-flux) y tiene tres principios que seguirán:

• Una tienda como principal fuente de verdad, esto significa que solo habrá un almacenamiento de estados.
• El estado solo es legible, el objeto dirá si el estado puede cambiar
• Funciones puras, que leerán el último estado y enviarán un nuevo valor en función de sus criterios.

Flux es un sistema de gestión de datos / información, que consta de una línea unidireccional donde la UI (Fronted) emite acciones (Provider) a una Store que almacena los datos del componente y dependiendo de lo que trae el proveedor, actualiza los datos y envía una notificación al componente de emisión para que este pueda actualizarse con el nuevo estado.

Queremos envolver los tres componentes de la aplicación completa dentro del proveedor porque es la conexión con la tienda, la fuente de la verdad, donde está el estado de los componentes de la aplicación. Este tiene un atributo único que es la tienda.

Básicamente, como su nombre lo indica, mantiene el estado de los componentes de la App. Fácil, pero la complejidad está en su creación. Requiere una función ** createStore ** que tiene dos argumentos, un reductor y el almacenamiento de datos que debes inicializar de antemano.

¿Qué hace el reductor? bueno, recibe dos parámetros, un estado actual y la acción que es un objeto con un tipo (de acción) y una carga útil (el estado desea cambiar). Con esto, el reductor filtra la acción mediante un interruptor y con la carga útil, aplica cambios a los datos. PERO … la tienda debe mantenerse inmutable, por lo que usamos operadores de propagación para elegir el estado específico y aplicar los cambios. Además, puede utilizar el objeto. assing.

** Reductor: ** Digamos que está cerca de la tienda y logra cambiar los estados que indican las acciones usando el interruptor como filtro.

** Acción: ** Contiene la carga útil que puede ser el estado o indica que la interfaz de usuario interactuó para cambiar y normalmente tiene una ID que es de su tipo, por lo que el reductor identificará qué tipo de acción desea realizar el cliente en la tienda .

[Aquí] (https://css-tricks.com/understanding-how-reducers-are-used-in-redux/) encontrará más y con ejemplos sobre reductores, acciones, despliegues, tipos.