Saltar al contenido

Reaccionar tutorial Redux principiantes con examplesDec, 10thIn este tutorial, vamos a aprender acerca de cómo utilizar el redux …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar la biblioteca redux para la administración del estado en reaccionar aplicaciones.

¿Cuál es Redux?

Redux es una biblioteca de gestión estatal para las aplicaciones de JavaScript, tiendas redux todo el estado de la aplicación en Thea único objeto JavaScript. herramientas

Redux dev ayudará a comprobar cómo se cambia el estado de la aplicación.

¿Por qué tenemos que utilizar redux en reaccionar?

En el Reaccionar aplicaciones, tenemos un estado que está relacionado con los componentes y estamos pasando de datos hacia abajo a los componentes hijos mediante el uso de props.If estamos creando grandes aplicaciones a menudo es difícil compartir el estado con los otros componentes usando accesorios.

Así que tenemos que utilizar el redux para guardar nuestro estado de la aplicación entera es un solo objeto JavaScript entonces puede acceder a él en cualquier lugar de nuestro árbol de componentes de aplicaciones.

Introducción a Reaccionar Redux

En primer lugar, tenemos que configurar e instalar una nueva aplicación para reaccionar con la función de crear una reacción aplicación línea de comando.

Abre los siguientes comandos de terminal y correr.

npx create-react-app react-redux

Este comando anterior descargará el reaccionan archivos relacionados en la carpeta “reaccionar-redux”.

Ahora, tenemos que cambiar nuestro directorio a la carpeta de “reaccionar-redux”.

cd react-redux

npm start

NPM inicio se utiliza ejecuta el servidor de desarrollo.

biblioteca Instalación redux

vamos a instalar la biblioteca redux desde el gestor de paquetes nodo (NPM).

npm install --save redux

Ahora, ‘reaccionar redux-’ carpeta abierta en el editor de código favorito. función

Reductor función

el reductor en el redux nos ayuda a devolver el nuevo estado de la aplicación, tomando el estado de la aplicación anterior y el tipo de acción. funciones

Reductor son funciones puras que significa que no están mutando el estado que se le da, en lugar de devolver el nuevo estado de la aplicación.

crear un archivo reducer.js en la carpeta src.

const counterReducer = (state = 0, action) => {

switch (action.type) {
case "INCREMENT":
return state + 1
case "DECREMENT":
return state - 1
default:
return state
}

}

export default counterReducer

En el código anterior, hemos creado una función counterReducer con dos estados de parámetros y actionInside la función que define counterReducer sentencia switch mediante el paso de una propiedad action.type.

Nos añadió estado de parámetros por defecto a 0.

Cómo actualizar el estado en Redux?

En el redux no podemos actualizar el estado directamente, la única manera de cambiar el estado está llamando andispatch método con el objeto de la acción.

El método de despacho es proporcionada por el redux.

Crear tienda

Vaya a archivo index.js presente dentro de la carpeta de aplicaciones. Dentro de las

index.js tenemos que importar la función counterReducer desde el archivo de que acabamos de crear reducer.js arriba y la función de la biblioteca createstore ‘redux’.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux'
import counterReducer from './reducer';

const store = createStore(counterReducer)

console.log(store)

ReactDOM.render(, document.getElementById('root'));

En el código anterior, pasamos nuestra función counterReducer como un argumento a la createStorefunction y registra la propiedad de la tienda.

Si abre la consola del navegador verá un objeto que es devuelto por la función createstore.

En la imagen de arriba, hemos visto tres métodos importantes se registran en la consola.

despacho : El envío método se utiliza para actualizar el estado tomando el objeto acción como anargument.

getState : El método getState se utiliza para obtener el estado de la aplicación actual.

Suscríbase : La Orden de suscripción método se utiliza para volver a hacer nuestra aplicación cada vez que se actualiza el estado.

console.log(store.getState()) // 0

si invocamos la store.getState () podemos ver un estado de la aplicación actual, que es de 0

Redux herramientas dev configuración

Redux extensión herramientas dev nos ayudan a ver qué tipo de acción se distribuye por parte del usuario, actual y estado previo.

Se puede descargar en su tienda web de Chrome.

Una vez que se ha descargado correctamente ahora reiniciar el navegador.

navegar a su index.js y pasar esta (ventana .__ REDUX_DEVTOOLS_EXTENSION__ && ventana .__ REDUX_DEVTOOLS_EXTENSION __) () de la línea como un segundo argumento de la función createstore.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux'
import counterReducer from './reducer';

const store = createStore(counterReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())ReactDOM.render(, document.getElementById('root'));

Vamos a crear un componente de contador mediante el estado redux.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { createStore } from 'redux'
import counterReducer from './reducer';

const store = createStore(counterReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

function increment() {
store.dispatch({ type: "INCREMENT" })
}

function decrement() {
store.dispatch({ type: "DECREMENT" })
}

const Counter = () => {
return (

{store.getState()}


)
}

ReactDOM.render(, document.getElementById('root'));

En el código anterior, hemos creado dos funciones que son de incremento y decremento.

función de incremento : se utiliza para enviar el tipo de acción de incremento.

función de decremento : se utiliza para enviar el tipo de acción decremento.

Ahora abra su navegador y vaya a localhost: 3000.

Si hacemos clic en el botón de incremento o decremento verá el estado se actualiza en las herramientas redux dev pero nuestro componente Contador todavía no es re-renderizado con el estado actualizado becausewe no están invocando el método de suscripción.

Suscribirse método

El método de suscripción en redux nos ayuda a volver a hacer nuestra aplicación cada vez que se actualiza el estado.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { createStore } from 'redux'
import counterReducer from './reducer';

const store = createStore(counterReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

function increment() {
store.dispatch({ type: "INCREMENT" })
}

function decrement() {
store.dispatch({ type: "DECREMENT" })
}

const Counter = () => {
return (

{store.getState()}


)
}

const render = () => ReactDOM.render(, document.getElementById('root'))render()store.subscribe(render);

Aquí hemos creado una función render y se lo pasó al método suscribirse como primera discusión.