Redux es uno de los temas más confusos y probablemente difíciles para alguien que está tratando de aprenderlo desde cero. Pero porque??
¿La razón es la cantidad de repeticiones o las terminologías en Redux que te impidieron aprenderlo?
Está buscando una guía de Redux, lee algunos blogs/tutoriales, mira algunos videos de YouTube, pero las cosas se vuelven más confusas y complicadas cuando descubre que diferentes videos cuentan diferentes enfoques para crear una aplicación.
Store, Reducer, Action, Dispatch, Subscribe y muchas terminologías en Redux lo obligan a pensar por qué necesitamos un proceso tan largo si las cosas se pueden resolver de manera sencilla. Podría estar pensando que en lugar de simplificar las cosas, solo está aumentando la complejidad de una aplicación. Es posible que también haya encontrado algunas bibliotecas como Redux, React-Redux, Redux-thunk, Redux-saga, Redux-promise, Reselect, Recompose y muchas más. Enrutamiento, autenticación, representación del lado del servidor, empaquetado…. ¡¡¡oh Dios mío!!! Hay muchas cosas que aprender y es abrumador para ti. En algún momento, empiezas a perder la cabeza…
¡Relax! No eres el único que experimenta este problema y lucha con el aprendizaje de Redux.
Si está buscando un solo recurso para comprender todos los conceptos básicos, dejando de lado todo lo demás que no es importante aprender, entonces estamos aquí para ayudarlo y en este blog, haremos todo lo posible para que comprenda todos los conceptos básicos de Redux sin confundirte con un montón de terminologías. Comencemos con eso…
En primer lugar, deje de lado todas las cosas extra y vayamos solo con Redux. En este momento solo presentaremos las cosas mínimas en Redux para aprender ahora. No es necesario profundizar inicialmente con algunos conceptos como React-router, Redux-form, Reselect, Ajax, Webpack, Authentication, Testing, etc. Recuerde que no se ejecuta en un día, primero debe aprender a caminar.
Antes de comenzar a aprender Redux, asegúrese de conocer los conceptos básicos de React.
¿Qué es Redux?
En la documentación oficial, Redux se define como…
Redux es un contenedor de estado predecible para aplicaciones de JavaScript.
Bueno, al principio estas 9 palabras te dan la sensación de 90 oraciones incompletas donde no obtienes nada. Bueno, la documentación tiene cosas explicativas cuando empiezas a leerla. Tome un ejemplo de la aplicación React. La mayoría de las veces, define el estado de su aplicación en el nivel superior del componente, pero ¿ha notado que cuando su aplicación crece, todo su estado en un componente de nivel superior ya no es suficiente para usted y ahora es difícil de administrar ? todo su estado en la aplicación? También es posible que cambien muchos datos en su aplicación con el tiempo. Redux se presenta para resolver todos estos problemas.
La gestión del estado es una gran preocupación en aplicaciones grandes y Redux resuelve este problema. Algunas cosas buenas que puede hacer con Redux son iniciar sesión, recargar en caliente, viajar en el tiempo, aplicaciones universales, grabar y reproducir, etc.
Tres Principios Básicos de Redux
Lo mantendremos simple para usted y entendámoslo primero sin usar la jerga técnica. Consideremos un escenario de la vida real de los bancos. Quiere retirar algo de efectivo de su cuenta bancaria. Vas a la sucursal bancaria con una intención/acción en mente, es decir, RETIRAR_DINERO. Cuando ingresas al banco vas directo al mostrador de Cajero para hacer tu pedido. Pero… ¿por qué necesitas hablar con el cajero? ¿Por qué simplemente no entras en la bóveda del banco para sacar tu dinero?
Usted es consciente de que hay un proceso que debe seguir para retirar su dinero. Cuando hablas con el cajero, se toma un tiempo, verifica algunos detalles, ingresa algunos comandos y te entrega el efectivo. Relacionemos este ejemplo con Redux y entendamos algunas de sus terminologías.
1. Considere Redux Store como una bóveda de banco y el estado de su aplicación es como dinero. Toda la interfaz de usuario de su aplicación es una función de su estado. Al igual que su dinero está seguro en la bóveda del banco, el estado de su aplicación está seguro en la Tienda Redux. Ahora, esto lleva al primer principio de Redux…
Fuente única de verdad: el estado de toda su aplicación se almacena en un árbol de objetos dentro de una sola tienda.
Simplifiquemos más esta afirmación. En lugar de tirar su dinero por todas partes en el banco, guarde el dinero en una bóveda. Entonces, en Redux, es recomendable almacenar el estado de la aplicación en un solo objeto administrado por la tienda Redux.
2. Visitas el banco con la acción en mente, es decir, RETIRAR_DINERO. Nadie te va a dar dinero si andas por aquí y por allá. Algo similar sucede en Redux. Si desea actualizar el estado de su Redux (como lo hace con setState en React), debe informar a Redux sobre su acción. Al igual que sigues un proceso para retirar dinero de tu banco, Redux también sigue un proceso para cambiar/actualizar el estado de tu aplicación. Esto lleva al segundo principio de Redux.
El estado es de solo lectura
La única forma de cambiar el estado es emitir una acción un objeto que describa lo que sucedió.
El significado de la declaración anterior es bastante simple. En Redux, su acción WITHDRAW_MONEY estará representada por un objeto y se verá como a continuación…
{
type: "WITHDRAW_MONEY",
amount: "$10,000"
}
El objeto anterior es una acción en la aplicación Redux que tiene un campo de tipo que describe la acción que desea realizar. Entonces, cada vez que necesite cambiar/actualizar el estado de su aplicación Redux, debe enviar una acción.
3. Considere su cajero en el banco como un Reductor en su aplicación Redux. Para RETIRAR_DINERO de la bóveda de su banco, primero debe transmitir su intención/acción al cajero. Ahora el cajero seguirá algún proceso y se comunicará con la bóveda del banco que guarda todo el dinero del banco. Algo similar sucede en Redux. Para actualizar el estado de su aplicación, debe transmitir su acción al reductor. Ahora el reductor tomará su acción, realizará su trabajo y se asegurará de que obtenga su dinero. Su Reductor siempre devuelve su nuevo estado . Enviar la acción al reductor se llama despachar una acción. Esto lleva a la última o latercer principio de Redux.
Para especificar cómo se transforma el árbol de estado mediante acciones, escribe reductores puros.
Entenderemos el Reductor puro más adelante en este blog. Espero haber explicado bien las tres terminologías principales de Redux: la tienda , el reductor y una acción .
Construyamos la primera aplicación Redux simple
Con un ejemplo de la vida real, entendimos los principios y algunas terminologías comunes de Redux, pero ¿cómo introducir todas estas cosas en una aplicación? Para profundizar sus conceptos fundamentales en Redux, tomemos un ejemplo de una aplicación React simple y refactorizaremos la aplicación para introducir Redux en ella.
Si está familiarizado con React, no tendrá problemas para comprender la estructura de la aplicación React anterior. Puede crear esta aplicación usando el comando create-react-app . En su aplicación, el componente principal de la aplicación importa un componente <HelloTech /> y presenta la información en su cuerpo. El componente <HelloTech /> toma un accesorio tecnológico , y este accesorio muestra diferentes tecnologías al usuario. Por ejemplo , <HelloTech tech=”Redux” /> mostrará el siguiente resultado al usuario….
A continuación se muestra el código para el componente de la aplicación…
src/Aplicación.js
Javascript
import React, { Component } from "react";
import HelloTech from "./HelloTech";
class App extends Component {
state = {
tech : "React"
}
render() {
return <HelloTech tech={this.state.tech}/>
}
}
export default App;
Estamos pasando la tecnología como accesorio al componente HelloTech como se muestra a continuación:
<HelloTech tech={this.state.tech}/>
Por ahora, olvídate de la implementación del componente HelloTech. Solo se trata de tomar el soporte técnico y usar algo de CSS para fines de estilo. La principal preocupación aquí es refactorizar el componente de la aplicación y usar Redux en él. Redux es el administrador de estado de nuestra aplicación, por lo que debemos eliminar el objeto de estado y queremos que Redux lo administre. Recuerda el ejemplo de la bóveda del banco, guarda todo el dinero. De manera similar, la tienda Redux administra el estado general de la aplicación y mantiene el objeto de estado de la aplicación. Entonces, primero debemos eliminar el objeto de estado actual de App.js y debemos instalar Redux ejecutando npm install –save redux desde la interfaz de línea de comandos.
Javascript
import React, { Component } from "react";
import HelloTech from "./HelloTech";
class App extends Component {
// the state object has been removed.
render() {
return <HelloTech tech={this.state.tech}/>
}
}
export default App;
Crear tienda Redux
En el caso de la bóveda de un banco, se podría contratar a algunos ingenieros para crear una instalación segura para guardar dinero. De manera similar, aquí en Redux, la biblioteca de Redux proporciona algunas API para crear la instalación de la Tienda. A continuación se muestra el código para crear una tienda en Redux…
import { createStore } from "redux"; //an import from the redux library
const store = createStore();
Importamos la función de fábrica createStore de Redux y luego invocamos la función createStore() para crear la tienda.
Definir la relación entre la tienda y el reductor
Cuando visita el banco para retirar su dinero y le informa al cajero de su acción, no obtiene el dinero al instante. En primer lugar, el cajero verifica su cuenta para saber si tiene suficiente dinero para realizar la transacción o no. Se comunica con la bóveda del banco para obtener esta información. En pocas palabras, el Cajero y la Bóveda siempre están sincronizados. Algo similar sucede en Redux. La Tienda (Bóveda Bancaria) y el Reductor (Cajero) se comunican entre sí, y siempre están sincronizados. Pero, ¿cómo escribir esta lógica en nuestro código? Pasamos el reductor como argumento en la función createStore() y debajo está el código completo para App.js
Aplicación.js
Javascript
import React, { Component } from "react";
import HelloTech from "./HelloTech";
import { createStore } from "redux";
const store = createStore (reducer);
class App extends Component {
render() {
return <HelloTech tech={this.state.tech}/>
}
}
export default App;
el reductor
Si escucha la palabra Reductor, parece que es una función reductora que realiza el tipo de trabajo ‘Reducir’. Bueno, en JavaScript, ya usas Reducer y ese es un método Array.reduce() (es posible que conozcas este método). Este método toma dos valores acumulador y valor actual. Echa un vistazo al ejemplo que se da a continuación…
let arr = [1, 2, 3, 4, 5] let sum = arr.reduce((x,y) => x + y) console.log(sum) // 15
Aquí x es el acumulador e y es el valor actual. Algo similar sucede en Redux. Reducer es una función en Redux que toma dos parámetros. Uno es ESTADO de la aplicación y el otro es ACCIÓN .
Ahora necesitamos incluir el Reductor en nuestra aplicación, lo cual aún no hemos hecho. Así que cree un reductor de directorio y cree un archivo index.js en él . La ruta para la función de reducción será src/reducers/index.js. En este momento, solo pasaremos Store como un argumento en Reducer, y solo exportaremos una función simple. El código se ve a continuación…
export default (state) => {
}
En Array.reduce() devolvimos la suma del acumulador y el valor actual. Si toma el ejemplo de nuestro escenario bancario, luego del retiro, el dinero en la bóveda de su banco ya no es el mismo. Se actualizará y nuevamente, el Cajero y la Bóveda permanecerán sincronizados con el saldo restante en su cuenta. Al igual que el cajero, el reductor siempre devuelve el nuevo estado de su aplicación. Hablaremos sobre cambiar/actualizar el estado más adelante en este blog. En este momento, considere un caso en el que visita el banco y no realizó ninguna acción, por lo que el saldo bancario sigue siendo el mismo. En Redux, si no realiza ninguna acción y no pasa la Acción como argumento en Reducer que el estadoseguirá siendo el mismo y el reductor devolverá el mismo estado como un nuevo estado. En este punto, mantenga un nuevo estado devuelto a medida que pasó el mismo estado .
export default (state) => {
return state
}
Segundo argumento para createStore
Cuando creó una cuenta en su banco, es posible que haya depositado una cantidad en su cuenta, y si le pregunta al cajero su saldo bancario, lo buscarán y se lo dirán. De la misma manera, cuando crea una tienda Redux, realiza un depósito inicial similar que se conoce como initialState. Representaremos este estado inicial como un segundo argumento pasado a createStore .
const store = createStore(reducer, initialState);
Entonces, initialState es como un depósito inicial en su tienda (bóveda bancaria) y si no realiza ninguna acción, este initialState se devolverá como el estado de la aplicación. A continuación se muestra el código actualizado en App.js con initialState en nuestra aplicación.
Aplicación.js
Javascript
import React, { Component } from "react";
import HelloTech from "./HelloTech";
import reducer from "./reducers";
import { createStore } from "redux";
const initialState = { tech: "React " };
const store = createStore(reducer, initialState);
class App extends Component {
render() {
return <HelloTech tech={this.state.tech}/>
}
}
export default App;
En este punto, su aplicación generará un error si la ejecuta porque la propiedad técnica todavía dice this.state.tech. Hemos eliminado el objeto de estado de nuestra aplicación, por lo que no estará definido. En este momento, Store administra completamente el estado, por lo que debemos reemplazar esta línea con el método getState() que está disponible cuando crea una tienda con el método createStore(). Si llamamos al método getState en la tienda creada, obtendremos el estado actual de nuestra aplicación. El ESTADO INICIAL pasado a createStore() está representado por el objeto {tech: React}. Entonces, en nuestro caso, store.getState() devolverá este objeto. A continuación se muestra el código actualizado para App.js
Aplicación.js
Javascript
import React, { Component } from "react";
import HelloTech from "./HelloTech";
import { createStore } from "redux";
const initialState = { tech: "React " };
const store = createStore(reducer, initialState);
class App extends Component {
render() {
return <HelloTech tech={store.getState().tech}/>
}
}
¡¡¡Felicidades!!! Acabamos de refactorizar una aplicación React simplepara usar Redux. Ahora el estado es administrado por Redux. Ahora pasemos al siguiente tema que es Acciones en Redux.
Acción de reducción
En nuestro escenario de caso bancario, su intención/acción fue WITHDRAW_MONEY. Debe informar su acción al cajero y el cajero será responsable de actualizar su dinero en su cuenta y entregárselo . Lo mismo sucede en el reductor de Redux . En una aplicación React pura, usamos el método setState para actualizar el estado en nuestra aplicación, pero aquí debemos informar nuestra acción al Reducer para actualizar el estado en su aplicación. ¿¿Pero cómo??
Por despacho y acción! ¿¿¿Y como hacer eso???
Solo necesitamos describir la acción mediante un objeto JavaScript simple y este objeto debe tener un campo de tipo para describir la intención de la acción. El código se verá como algo a continuación…
{
type: "withdraw_money"
}
No obtendrá el dinero si solo indica su acción para retirar dinero al cajero. También es necesario mencionar la cantidad. Muchas veces en nuestra aplicación también necesitamos agregar información adicional para obtener detalles completos. Así que agregaremos una cantidad de información más en nuestro código y se verá como a continuación…
{
type: "withdraw_money",
amount: "$3000"
}
Podemos incluir algo más de información, pero por ahora es suficiente e ignorar los otros detalles. Realmente depende de usted cómo estructura su acción, pero un enfoque estándar/común en Redux es usar el campo de carga útil. Ponemos todos los datos/información requeridos en el objeto de carga útil que describe la acción y se parece a lo que se muestra a continuación…
{
type: "withdraw_money",
payload: {
amount: "$3000"
}
}
Manejo de respuestas a acciones en el reductor
Hemos comentado que Reducer toma dos argumentos para actualizar la aplicación . Uno es el estado y el otro es la acción. Así que un Reductor simple se parece a lo que se muestra a continuación…
function reducer(state, action) {
// return new state
}
Ahora, para manejar la acción pasada al Reducer, normalmente usamos declaraciones de cambio en Redux, que no es más que básicamente una declaración if/else.
Javascript
function reducer (state, action) {
switch (action.type) {
case "withdraw_money":
//do something
break;
case "deposit-money":
//do something
break;
default:
return state;
}
}
En el ejemplo anterior, hemos realizado dos acciones. Uno es retirar_dinero y el otro es depositar_dinero. En su aplicación Redux según el requisito, puede definir tantas acciones como desee, pero cada acción fluye a través del reductor y eso es lo que hemos hecho en el código anterior. En el código anterior, ambas acciones pasan por el mismo reductor y el reductor diferencia cada una de ellas cambiando el tipo de acción . Es así como cada acción puede ser manejada por separado en Reducer sin ningún inconveniente. Más adelante en el código anterior, solo necesitamos definir la parte de hacer algo para devolver un nuevo estado.
Examen de las acciones en la aplicación
Volvamos al ejemplo anterior de HelloTech y comprendamos cómo actualizar el estado de la aplicación. Mira la imagen que se muestra a continuación. Hay tres botones y nuestro objetivo es cambiar el texto/tecnología cada vez que se hace clic en un botón específico. Para hacerlo, necesitamos enviar una acción y el estado de la aplicación debe actualizarse.
Por ejemplo, si se hace clic en el botón React-redux, debería verse como a continuación…
De la imagen de arriba, está claro que necesitamos describir tres acciones…
Para el botón Reaccionar:
{
type: "SET_TECHNOLOGY",
text: "React"
}
Para el botón React-Redux:
{
type: "SET_TECHNOLOGY",
text: "React-redux"
}
Para el botón Elm:
{
type: "SET_TECHNOLOGY",
text: "Elm"
}
Los tres botones hacen lo mismo. Esa es la razón por la que hemos definido las tres acciones con el mismo tipo de campo. Trátelos como clientes en un banco con la misma intención/acción de depositar dinero ( tipo) pero las diferentes cantidades ( texto) .
Creadores de acciones
Si observa el código que hemos escrito para crear acciones, notará que pocas cosas se repiten en el código. Por ejemplo, el mismo tipo de campo se escribe varias veces, lo que no es bueno según el principio DRY en la programación. Para mantener nuestro código SECO necesitamos mirar el nuevo término Action Creators . Que son esos….??? Hablemos de eso.
Los creadores de acciones son solo funciones simples que lo ayudan a crear acciones manteniendo su código SECO y devuelve objetos de acción. A continuación se muestra el código …
export function setTechnology (text) {
return {
type: "SET_TECHNOLOGY",
tech: text
}
}
En la función anterior, solo necesitamos llamar a la función setTechnology y recuperaremos la acción. No hay necesidad de duplicar el código en todas partes. Podemos simplificar esto más y podemos escribir el mismo código anterior usando la función ES6.
const setTechnology = text => ({ type: "SET_TECHNOLOGY", text });
Juntemos todo
En esta sección, hablaremos sobre la estructura de carpetas y veremos cómo colocar todo en carpetas/archivos específicos para mantener las cosas organizadas. Si hablamos de nuestro escenario de caso bancario, notará que las cosas están organizadas en su propio lugar. Por ejemplo, el cajero se sienta en su propio cubículo/oficina y la bóveda está segura en habitaciones seguras separadas. Haremos algo similar en Redux. Depende totalmente de usted cómo desea estructurar su proyecto, pero un enfoque común en Redux es crear una carpeta/directorio separado para los componentes principales, como el reductor, las acciones y la tienda.
Cree tres carpetas diferentes, reductores, tiendas y acciones. En cada una de las carpetas crea un archivo index.js que será el punto de entrada para cada uno de los componentes de Redux. Ahora refactorice la aplicación que hemos creado antes y coloque todo en su propio lugar.
tienda/index.js
import { createStore } from "redux";
import reducer from "../reducers";
const initialState = { tech: "React " };
export const store = createStore(reducer, initialState);
Siempre que necesitemos almacenar en cualquier lugar de nuestra aplicación, podemos importar el archivo anterior mencionando la ruta de importación de la tienda desde “./store”;
Ahora el archivo App.js tendrá una ligera diferencia en su código.
Javascript
import React, { Component } from "react";
import HelloTech from "./HelloTech";
import ButtonGroup from "./ButtonGroup";
import { store } from "./store";
class App extends Component {
render() {
return [
<HelloTech key={1} tech={store.getState().tech} />,
<ButtonGroup key={2} technologies={["React", "Elm", "React-redux"]} />
];
}
}
export default App;
En la línea de código anterior, 4 se ha cambiado de acuerdo con la ruta de Store . También hemos importado un componente ButtonGroup que es básicamente responsable de renderizar los tres botones. El componente <ButtonGroup /> toma una variedad de tecnologías y escupe botones.
Otra cosa que debe tener en cuenta es que el componente de la aplicación devuelve una array. En React 16 no necesita usar <div> para envolver el elemento JSX. como lo estábamos haciendo antes en React. Podemos usar una array y pasar la propiedad clave a cada elemento de la array para realizar el mismo trabajo.
Pasemos al componente ButtonGroup . Es un componente sin estado que incluye una variedad de tecnologías que se denota por technologies .
ButtonGroup.js
Javascript
import React from "react";
const ButtonGroup = ({ technologies }) => (
<div>
{technologies.map((tech, i) => (
<button
data-tech={tech}
key={`btn-${i}`}
className="hello-btn"
>
{tech}
</button>
))}
</div>
);
export default ButtonGroup;
En el código anterior, la array de botones que se pasa es [“React”, “Elm”, “React-redux”]. Necesitamos recorrer esta array usando el mapa para representar cada una de las tecnologías en <button></button>. Los botones generados también tienen pocos atributos, como clave y tecnología de datos . Un botón completamente renderizado se verá así:
<button data-tech="React-redux" key="btn-1" className="hello-btn"> React </button>
Esto generará todos los botones, pero no pasará nada si hace clic en los botones. Necesitamos usar el controlador onClick dentro de la función de renderizado.
Javascript
<div>
{technologies.map((tech, i) => (
<button
data-tech={tech}
key={`btn-${i}`}
className="hello-btn"
onClick={dispatchBtnAction}
>
{tech}
</button>
))}
</div>
Ahora, recuerde el código para enviar la acción para la tecnología individual React, React-redux, Elm.
{
type: "SET_TECHNOLOGY",
tech: "React"
}
y para React-redux será como….
{
type: "SET_TECHNOLOGY",
tech: "React-redux"
}
Así que ahora necesitamos escribir el código para la función dispacthBtnAction para enviar la acción cada vez que hacemos clic en cualquier botón. A continuación se muestra el código …
function dispatchBtnAction(e) {
const tech = e.target.dataset.tech;
store.dispatch(setTechnology(tech));
}
El código de arriba no tiene sentido para ti… ¿¿verdad??? Aquí está la explicación…
- e.target.dataset.tech obtiene el conjunto de atributos de datos en el botón data-tech. Por lo tanto, la tecnología mantendrá el valor del texto.
- store.dispatch() define cómo envías una acción en Redux.
- setTechnology() es el creador de acciones que escribimos anteriormente.
Ahora, recuerda el mismo escenario del caso bancario. Para tu acción WITHDRAW_MONEY, interactúas con el cajero… ¿sí? Esto significa que si quiere su dinero, su acción debe pasar por el cajero. Lo mismo está sucediendo en el código anterior. Cuando estás despachando una acción, esta pasa por el Reductor (cajero).
Devolviendo un nuevo estado
Hasta ahora, el cajero del banco no hizo nada con la acción WITHDRAW_MONEY. Esperamos que el cajero actualice el dinero en la bóveda del banco y te entregue el dinero. En nuestra aplicación Redux, también queremos que nuestro Reducer devuelva un nuevo estado que debería tener el texto de acción allí.
Lo que queremos decir exactamente es que si el estado actual es { tecnología: «Reaccionar»} entonces con una nueva acción dada a continuación…
{
type: "SET_TECHNOLOGY",
text: "React-Redux"
}
Esperamos que el nuevo estado sea {tech: «React-Redux»}
Hemos discutido anteriormente que para manejar diferentes tipos de acciones podemos usar declaraciones de cambio en nuestro código Reducer con diferentes acciones en mente. En nuestro escenario de caso bancario, el cajero responderá de acuerdo con la intención/acción dada por el cliente. Estas acciones pueden ser WITHDRAW_MONEY, DEPOSIT_MONEY o simplemente SAY_HELLO. Del mismo modo, el reductor responderá en función de su intención. En este momento, solo tenemos un caso SET_TECHNOLOGY , por lo que el código se verá como algo a continuación… (Nuestro cajero que en realidad nos da dinero)
Javascript
export default (state, action) => {
switch (action.type) {
case "SET_TECHNOLOGY":
return {
...state,
tech: action.text
};
default:
return state;
}
};
Aquí observe que estamos devolviendo una nueva copia del estado, un nuevo objeto que utiliza el operador de propagación ES6 … estado . Se supone que no debemos mutar el estado recibido en nuestro Reductor. Técnicamente no deberías escribir el código como a continuación…
export default (state, action) => {
switch (action.type) {
case "SET_TECHNOLOGY":
state.tech = action.text;
return state;
default:
return state;
}
};
Además, Reducer debe ser funciones puras en nuestro código sin efectos secundarios: sin llamadas a la API ni actualización de un valor fuera del alcance de la función. Ahora el cajero está respondiendo a tu acción y dándote el dinero que solicitaste. Pero nuevamente, si hace clic en el botón, no puede ver el texto actualizado en su pantalla… discutámoslo con un nuevo término suscribirse.
Suscribirse a las actualizaciones de la tienda
Bueno, ha recibido su dinero del cajero, pero ¿qué pasa con algún tipo de recibo personal o notificación/alerta por correo electrónico/móvil? Lo más probable es que reciba una notificación sobre su transacción y el saldo que queda en su cuenta. Lo recibe porque se ha suscrito para recibir notificaciones de transacciones del banco, ya sea por correo electrónico o mensaje de texto. Algo similar sucede en Redux. Para recibir una actualización después de la acción exitosa iniciada, debe suscribirse a ellos. Ahora la pregunta es… ¿cómo?
Redux proporciona un método de suscripción para hacer este trabajo. Necesitamos usar la función store.subscribe() , y necesitamos pasarle el argumento. Siempre que haya una actualización de estado, se invocará este argumento. Debemos tener en cuenta que el argumento que se le pasa debe ser una función.
Una vez que se actualiza el estado, esperamos que nuestra aplicación vuelva a representar los nuevos valores de estado. Toda la aplicación se representa en el archivo index.js principal de nuestra aplicación. Si abre este archivo, encontrará el código que figura a continuación…
ReactDOM.render(<App />, document.getElementById("root")
La función anterior también se puede escribir usando la función ES6.
const render = () => ReactDOM.render(<App />, document.getElementById("root"));
render();
En el código anterior, acabamos de representar la aplicación en una función y luego invocamos la función para representar la aplicación. Ahora podemos pasar la lógica de representación refactorizada anteriormente a nuestra función store.subscribe() .
store.subscribe(render);
Ahora, <App /> se volverá a representar con un nuevo valor de estado cada vez que haya una actualización de estado exitosa en la tienda. A continuación se muestra el componente <App/> .
Javascript
class App extends Component {
render() {
return [
<HelloTech key={1} tech={store.getState().tech} />,
<ButtonGroup key={2} technologies={["React", "Elm", "React-redux"]} />
];
}
}
store.getState() en la línea 4 obtendrá el estado actualizado siempre que se produzca una nueva representación. Ahora la aplicación funcionará como espera que funcione y verá la tecnología actualizada cada vez que haga clic en un botón específico.
¡¡¡Felicidades!!! Estamos enviando con éxito una acción, recibiendo dinero del Cajero y luego suscribiéndonos para recibir notificaciones.
Eso es todo por ahora…
Conclusión
Hemos discutido toda la terminología principal de Redux y hemos hecho todo lo posible para explicar cada uno de ellos de la manera más simple. Pero el viaje de aprendizaje de Redux no termina aquí. Le sugerimos que practique algunos ejercicios más en Redux y construya algunos proyectos más complejos. Además, no tengas miedo de tantas bibliotecas disponibles en Redux. Cada biblioteca tiene su trabajo específico que irás comprendiendo poco a poco.
¡Esperamos que Redux no te asuste más!
Publicación traducida automáticamente
Artículo escrito por anuupadhyay y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA