Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Redux

 Redux es la biblioteca de administración de estado más popular que implementa el patrón Flux.

En este tutorial, conocerá Redux.

Redux es una biblioteca de administración de estado que se puede usar con muchas bibliotecas y marcos populares como Angular, React o Vue o también con JavaScript simple.

Redux es más popular entre los desarrolladores de React que cualquier otra biblioteca o marco.

Este tutorial le mostrará los conceptos básicos de Redux que se utilizarán en una aplicación React para manejar la gestión del estado.

Por qué usar Redux

La administración de datos en su aplicación React se puede hacer usando React Props o también la nueva API de contexto introducida en React 16.3+ .

Si solo necesita acceder a los datos en su aplicación desde diferentes componentes, simplemente puede usar la API de contexto que se creó para esta intención.

Si sus requisitos de datos se vuelven complejos, necesita utilizar funciones avanzadas para facilitar y mantener la creación, la mutación y el acceso a datos desde los componentes de su aplicación. Una arquitectura popular es el patrón Flux implementado por Redux que hace uso de un almacén de datos global centralizado con muchos conceptos y reglas que dictan cómo acceder y mutar el estado en el almacén global.

Conceptos básicos de Redux

Comencemos por comprender los diferentes conceptos de Redux antes de implementar nuestra aplicación de demostración React & Redux.

La tienda Redux

En Redux, el estado de la aplicación está centralizado en un objeto que se llama tienda.

El estado se puede cambiar directamente, pero mediante mutaciones y acciones.

Puede exponer el estado de la tienda utilizando la getStatefunción.

Puede actualizar el estado usando el dispatchmétodo.

Puede escuchar los cambios de estado utilizando el subscribemétodo.

Puede crear una tienda única y global utilizando la createStorefunción disponible en el reduxpaquete. Por ejemplo:

import { createStore } from 'redux'
import contactReducer from './reducers'
let store = createStore(contactReducer)

También puede pasar un estado inicial a la tienda usando el segundo parámetro de la createStorefunción:

let store = createStore(contactReducer, initialState)

Puede obtener el estado de la tienda usando:

store.getState()

Puede actualizar el estado usando:

store.dispatch(addContact({}))

Comportamiento

Las acciones son objetos de JavaScript simples que se pueden usar para describir un evento en la aplicación.

Las acciones deben tener una propiedad de tipo .

Por ejemplo, esta es una acción que podría usarse para agregar un contacto:

{
type: 'ADD_CONTACT'
}

También puede adjuntar datos a objetos de acción:

{
type: 'ADD_CONTACT',
name: 'Contact 1'
}

Creadores de acciones

Un creador de acciones es una función que crea acciones. Por ejemplo:

CONTACT_ADD = 'ADD_CONTACT';
function addContact(contact){
    return {
        type: ADD_CONTACT,
        name: contact.name || ''
    };
}

Reductores

Cuando se desencadenan acciones en su aplicación, debe acceder o cambiar el estado.

Un reductor le permite cambiar el estado de la aplicación.

Un reductor es una función de JavaScript pura que calcula el estado de la siguiente aplicación a partir del estado actual y una acción enviada.

(currentState, action) => nextState

Una función pura toma la entrada y devuelve una salida sin cambiar la entrada.

Este es un ejemplo de reductor:

const contactReducer = (state = '', action) => {
    if (action.type === 'ADD_CONTACT') {
          return action.name
    } else {
          return state
    }
}

Prerrequisitos

Para seguir este tutorial, debe tener algunos requisitos previos, como:

  • Node.js 8.10.0+ y NPM instalados en su máquina de desarrollo,
  • Un conocimiento práctico de React,
  • Conocimientos básicos de JavaScript.

Instalación de create-react-app

Comencemos instalando la aplicación create-react-app usando el siguiente comando:

$ npm install create-react-app -g

Tenga en cuenta que debe configurar npm para permitirle instalar paquetes globalmente sin sudo o simplemente agregar sudo antes de su comando.

Crear un proyecto de React

Después de la instalación, create-react-appusémoslo para crear un proyecto React ejecutando el siguiente comando:

$ npx create-react-app redux-demo 

A continuación, navegue dentro de la carpeta raíz de su proyecto y ejecute un servidor de desarrollo usando:

$ npm start

Instalación de Redux

Una vez que cree su proyecto React. Navegue dentro de la carpeta del proyecto y ejecute el siguiente comando para instalar Redux:

$ sudo npm install redux --save 
$ sudo npm install react-redux --save

Crear componentes de React

Antes de continuar con Redux, creemos los componentes para nuestra aplicación.

Creando Carpetas Redux

Ahora creemos una estructura de archivos adecuada para el desarrollo de Redux. Necesitamos crear las siguientes carpetas dentro de la srccarpeta de nuestro proyecto:

  • La carpeta de acciones ,
  • La carpeta de reductores ,
  • Y la carpeta de la tienda .

Publicar un comentario

0 Comentarios