Tutorial de React Redux para principiantes con ejemplos

Tutorial de React Redux para principiantes con ejemplos

En este tutorial, aprenderemos a usar la biblioteca redux para la gestión de estado en aplicaciones de reacción.

Índice
  1. ¿Qué es Redux?
  2. ¿Por qué necesitamos usar redux en reaccionar?
  3. Comience con React Redux
    1. Instalación de la biblioteca redux
    2. Función reductora
    3. ¿Cómo actualizar el estado en redux?
    4. Creación de tienda
    5. Configuración de las herramientas de desarrollo de Redux
    6. método de suscripción

¿Qué es Redux?

Redux es una biblioteca de administración de estado para aplicaciones de JavaScript, donde todo el estado de la aplicación se administra en un solo objeto de JavaScript.

También nos proporciona herramientas de desarrollo de Redux que nos ayudan a verificar cómo cambia el estado de nuestra aplicación.

¿Por qué necesitamos usar redux en reaccionar?

En las aplicaciones React, tenemos un estado vinculado a los componentes y pasamos datos a los componentes secundarios usando props.Si estamos construyendo aplicaciones grandes, a menudo es difícil compartir el estado con los otros componentes usando props.

Si bien tenemos que usar el redux para almacenar todo el estado de nuestra aplicación es un solo objeto de JavaScript, podemos acceder a él desde cualquier lugar desde el árbol de componentes de nuestra aplicación.

Comience con React Redux

Primero, necesitamos configurar e instalar una nueva aplicación de reacción usando el create-react-app herramienta de línea de comandos.

Abre tu terminal y ejecuta los siguientes comandos.

npx create-react-app react-redux

Este comando anterior descargará los archivos relacionados con la reacción a la carpeta "react-redux".



instale una nueva aplicación de reacción usando create-react-app

Ahora necesitamos cambiar nuestro directorio a la carpeta "react-redux".

npm start se utiliza para ejecutar el servidor de desarrollo.

Instalación de la biblioteca redux

Instalemos la biblioteca redux desde el administrador de paquetes de nodos (npm).

Ahora abra la carpeta 'react-redux' en su editor de código favorito.

Función reductora

La función Reducer en redux nos ayuda a devolver el nuevo estado de la aplicación tomando el estado anterior y el tipo de acción de la aplicación.

Las funciones reductoras son funciones puras, es decir, no modifican el estado que se les ha dado, sino que devuelven el nuevo estado de la aplicación.

para crear un reducer.js archivo en su src carpetas.

reductor.js


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 un counterReducer función de dos parámetros state Y action
En el interior de counterReducer función que hemos definido switch declaración pasando un action.type propiedad.

Agregamos la configuración predeterminada state para 0.

¿Cómo actualizar el estado en redux?

En redux no podemos actualizar el estado directamente, la única forma de cambiar el estado es llamar a un
dispatch método con action objeto.

EL dispatch El método lo proporciona redux.

Creación de tienda

Ir hacia index.js archivo presente en la carpeta de su aplicación.

En el interior de index.js tenemos que importar el counterReducer función de la reducer.js archivo que acabamos de crear arriba y createStore Función de biblioteca 'redux'.

índice.js

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(<App />, document.getElementById('root'));

En el código anterior, pasamos nuestro counterReducer funcionar como un argumento de la createStore
función y guardamos el store propiedad.

Si abre la consola de su navegador, verá un objeto que es devuelto por el createStore función.



reaccionar redux creando tienda

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

despacho : EL dispatch se utiliza para actualizar el estado tomando el action objeto como argumento.

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

suscribir: El método de suscripción se utiliza para representar nuestra aplicación cada vez que se actualiza el estado.

console.log(store.getState())  

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

Configuración de las herramientas de desarrollo de Redux

La extensión Redux Developer Tools nos ayuda a ver qué tipo de acción envía el usuario, estado actual y anterior.

Puede descargarlo desde su tienda web de Chrome.

Una vez que haya descargado con éxito, reinicie su navegador.

Accede a tu index.js y pasa esto ( window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) línea como el segundo argumento de la createStore función.

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(<App />, document.getElementById('root'));

Vamos a crear un Counter componente usando el redux Estado.

índice.js

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 (
        <div>
            <h1>{store.getState()}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>

        </div>
    )
}

ReactDOM.render(<Counter />, document.getElementById('root'));

En el código anterior hemos creado dos funciones que son increment Y decrement.

función de incremento : se usaba para despachar el tipo de acción INCREMENT.

función decremento : se usaba para despachar el tipo de acción DECREMENT.

Ahora abra su navegador y navegue hasta localhost:3000.

Si hacemos clic en increment O decrement verá que el estado se actualiza en las herramientas de desarrollo de redux, pero nuestro componente Counter aún no se muestra con el estado actualizado porque no estamos invocando el subscribe método.

herramientas de desarrollo redux

método de suscripción

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

índice.js

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 (
        <div>
            <h1>{store.getState()}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>

        </div>
    )
}

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

Aquí hemos creado un render función y se la pasó al subscribe método como primer argumento.



actualización de estado redux

Si quieres conocer otros artículos parecidos a Tutorial de React Redux para principiantes con ejemplos puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas