Cómo comenzar con el Redux?
Cree una carpeta separada en su ubicación deseada y abra la ventana del terminal.
Después de ejecutar con éxito el comando mencionado anteriormente, verá diferentes carpetas en la barra lateral de nuestra pantalla Visual Studio.
Aquí puedes ver una carpeta llamada SRC; Elimine todos los archivos presentes dentro de esta carpeta SRC. Además, haga un nuevo archivo y logren los índices con la extensión de js en total índice.js. Después de crear este nuevo archivo, abra el terminal y escriba el siguiente comando.
Como puede ver en el fragmento anterior, el administrador de paquetes de nodo (NPM) instalará el kit de herramientas Redux en nuestro proyecto React Aplication utilizando el comando de instalación.
Ahora hemos creado nuestra aplicación React y también hemos terminado con la instalación de Redux Toolkit. Es hora de establecer nuestros componentes Redux en este proyecto de aplicación React.
Entonces, antes que nada, configuremos la tienda de nuestro Redux. Entonces, por hacerlo, tendremos que importar el
configuración función de redux.
Por lo general, usamos el creador función incorporada para crear la tienda, pero configuración es una forma mejorada de crear la tienda, por lo que crearemos nuestra tienda utilizando el configuración función. La sintaxis es
import configurureStore de 'Redux';
Ahora estableceremos el segundo componente más de Redux I-E, reductor. Como sabemos, toma el estado actual y realiza una acción o evento en él, por lo que ahora definiremos la función del reductor.
Almacenar La función debe actualizarse cada vez que el reductor actúe en un estado. En cada acción que realiza el reductor, sabemos que el estado actual se cambiará a un estado actualizado. Para actualizar los valores de estado de la tienda, necesitamos usar la función de suscripción de la tienda.
El fragmento de código anterior dice cómo podemos configurar nuestra tienda y reductor para el Redux junto con la descripción. Si ejecuta el código anterior con el comando NPM Start, verá el mensaje de reductor que se muestra en la pantalla de su consola.
Ahora, como hemos ejecutado nuestra tienda y reductora, verifiquemos si la tienda se actualiza cada vez que el reductor realiza un evento o acción en su estado actual. Entonces, para esto, necesitamos enviar una acción.
Cada acción puede o no tener un tipo diferente, pero la acción debe tener un tipo. Es como que queremos realizar algo con un propósito significativo. El tipo de acción puede ser increment_number, declement_number, add_user, delete_records, etc.
Hemos actualizado nuestro código con el envío de nuestras acciones desde la tienda al reductor. El reductor realizará estas acciones en el estado actual y devolverá el estado actualizado. Más adelante, la función de suscripción ayudará a la tienda a actualizar los valores de estado en la tienda para uso futuro.
Puede ver en el fragmento anterior que el reductor realizó la acción del número de incremento al estado = 0 y devolvió el estado = 1, el almacén actualizó esta respuesta del reductor. Al enviar la otra acción con un incremento en número, el reductor aumentó nuevamente en el estado y lo hizo estado = 2. Cuando el reductor realiza el reductor en los resultados, la última acción enviada de la disminución del número actualiza el estado del estado = 2 al estado = 1.
Conclusión
En este artículo, cree una aplicación React simple para comenzar con Redux. El código de Visual Studio se utiliza para crear la aplicación. Este artículo demuestra un código simple que ejerce Redux. El Node Package Manager (NPM) instala el Kit de herramientas Redux en nuestro proyecto React Aplication utilizando el comando de instalación. Por lo tanto, puedes practicarlo y hacer otros experimentos para tu propio aprendizaje.