El objetivo de este artículo es explicar los conceptos básicos de Redux mediante una aplicación CRUD. La mayoría de las aplicaciones son aplicaciones CRUD. Si no sabes lo que CRUD realmente es, es la abreviatura de Create, Read, Update y Delete.
Así que esta entrada de blog te mostrará los pasos para crear una aplicación donde el usuario puede crear entradas, leer entradas, editar entradas y borrar entradas usando React y Redux, así que vamos a empezar. Creo que tienes Nodejs instalado en tu sistema.
Primero vamos a girar un nuevo proyecto, así que vamos a un directorio donde se almacenará este proyecto y escriba lo siguiente en el terminal-
create-react-app crud-redux
El comando anterior utiliza la herramienta CLI create-react-app para generar un proyecto de placa de calderas de reacción para que no tengamos que configurar ninguna herramienta. Si ese comando falla o da un error, asegúrese de tener create-react-app instalado en su máquina. Si no, haga lo siguiente y luego ejecute el comando anterior.
npm install -g create-react-app
El comando anterior instalará create-react-app globalmente en su sistema para que pueda usarlo en cualquier lugar que desee.
Una vez que el comando termine su trabajo tendrás un nuevo directorio llamado'crud-redux'. Cambie a este nuevo directorio. Ahora vamos a limpiar esto un poco ya que no necesitamos algunas de las cosas para este proyecto.
Escriba lo siguiente
cd src rm App.css App.test.js logo.svg registerServiceWorker.js
Por último, vuelva al directorio raíz del proyecto y ábralo en su editor de texto favorito.
Ahora vamos a instalar Redux y es React bindings. Así que de vuelta en el tipo de terminal lo siguiente-
npm install --save redux react-redux
Redux es una librería de administración de estado que le da acceso al estado en cualquier parte de sus componentes sin la necesidad de pasar accesorios. Por lo tanto, puede usarse con cualquier librería de front-end como Angular y React, pero funciona mejor con React. react-redux' es la biblioteca oficial que conecta ambos.
Ya que hemos borrado algunos de esos archivos antes, necesitamos hacer algunos cambios en index.js y App.js que son los siguientes-
Ir a crud-redux/src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(,document.getElementById('root'));
y crud-redux/src/App.js
npm start
Saldrá "Hello React!"
Si estás obteniendo errores por favor asegúrate de que has hecho los cambios que he mostrado arriba en index.js y App.js.
Cada vez que hago una aplicación de React siempre trato de hacer la versión básica de la misma y luego le agrego interactividad. Así que con eso en mente vamos a crear algunos componentes. En crud-redux/App.js haz lo siguiente.
import React, { Component } from 'react';
import PostForm from './PostForm';
import AllPost from './AllPost';
class App extends Component {
render() {
return (
Aquí he creado dos componentes. El componente PostForm contendrá los elementos del formulario para crear un puesto y el componente AllPost contendrá todos los puestos. Así que vamos a crear los archivos para cada uno de estos componentes. En la carpeta src cree dos archivos llamados'PostForm.js' y'AllPost.js'.
Dentro de PostForm.js agregue el siguiente código -
import React, { Component } from 'react';
class PostForm extends Component {
render() {
return (
Create Post
);
}
}
export default PostForm;
Añadiremos estilos más tarde, así que sigamos con el otro componente. Dentro de crud-redux/src/AllPost.js agregue las siguientes líneas-
import React, { Component } from 'react';
class AllPost extends Component {
render() {
return (
All Posts
);
}
}
export default AllPost;
Con esto tenemos la siguiente salida en el navegador.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
const store = createStore();
ReactDOM.render(
El método createStore nos permitirá crear la tienda pero aún no hemos terminado. Este método necesita un argumento especial y este argumento recibe un nombre especial llamado el'reductor'. Vamos a crear una carpeta separada llamada reductores. Así que bajo crud-redux/src crea una carpeta llamada `reductores'. Dentro de esa carpeta crear un archivo llamado postReducer.js Añadir el siguiente código por ahora
const postReducer = (state = [], action) => {
}
export default postReducer;
Rellenaremos el contenido de esa función un poco más tarde. Ahora vamos a entender otro concepto importante en Redux llamado acciones. Las acciones no son más que objetos Javascript simples con una propiedad de tipo. Esta propiedad de tipo describe el evento que está teniendo lugar en la aplicación. Este evento puede ser cualquier cosa, desde el incremento de un contador hasta la adición de elementos en una matriz. Estas acciones nos ayudan a seguir los diferentes eventos que están ocurriendo en nuestra aplicación. La estructura de una acción es la siguiente.
{
type: 'EVENT_NAME'
}
Una acción puede tener cualquier número de propiedades pero debe tener un tipo de propiedad. Así que una acción puede incluir datos como los siguientes
{
type:'ADD_ITEM',
name: 'Redux'
}
En este ejemplo el nombre del evento es 'ADD_ITEM' y los datos son la propiedad name con un valor de 'Redux'. Ahora otro término importante que se usa junto a las acciones se llama despacho. Cuando decimos 'enviar una acción' simplemente queremos decir llamar al método de envío que está dentro del objeto de la tienda con una acción. ¿Sigues conmigo?
Echemos un vistazo a la tienda. La tienda que creamos usando el método createStore es un objeto que tiene algunos métodos. Uno de esos métodos se llama despacho. Este método de envío acepta un objeto como argumento y este objeto es lo que llamamos'acción'.
Con eso fuera del camino, finalmente volvamos a esa función que escribimos antes dentro de postReducer.js. Cada vez que enviamos una acción, esta acción con su propiedad tipo es recibida por algo llamado el reductor. ¿Qué diablos es el reductor? Bueno, no es más que una función que toma el estado actual y una acción que fue enviada como parámetros y devuelve el nuevo estado.
Así que la próxima vez que vea el término reductor, recuerde que es sólo una función que le da un nuevo estado a sus componentes.
Ahora la pregunta es cómo hace el reductor para producir el nuevo estado para la aplicación. Bueno, eso es bastante simple, primero comprueba qué tipo de acción fue enviada y en base a ella devuelve el nuevo estado. Bajo crud-redux/src/reducers/postReducer.js agregue las siguientes líneas de código.
const postReducer = (state = [], action) => {
switch(action.type) {
case 'ADD_POST':
return state.concat([action.data]);
default:
return state;
}
}
export default postReducer;
Ahora lo que está pasando aquí es que estamos usando una'declaración de cambio' y estamos cambiando basándonos en el valor de action.type. Si el valor es 'ADD_POST' estamos devolviendo una nueva matriz que contiene action.data. Básicamente siempre que ocurre el evento `ADD_POST' queremos introducir algunos datos en la matriz de estado. Bueno, no es nada más que un objeto con nuestro título individual y el mensaje del mensaje. Una cosa a tener en cuenta aquí es que la función reductora espera un valor por defecto para el estado. Aquí estamos usando la sintaxis de parámetros por defecto ES6 para añadir eso. El valor por defecto para el estado aquí es un array vacío. Otra cosa a tener en cuenta es que un reductor siempre debe tener la cláusula por defecto dentro de la declaración del interruptor. En la cláusula por defecto simplemente devolvemos el estado. Esto se hace para que en caso de que ninguno de los valores de action.type coincida con alguno de los casos simplemente devolvamos el estado.
Ahora que tenemos algo de código dentro de postReducer.js, importémoslo en nuestro archivo index.js y pasémoslo a la tienda como argumento.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import postReducer from './reducers/postReducer';
const store = createStore(postReducer);
ReactDOM.render(
Ahora que hemos terminado con el reductor. Pasemos esta tienda a nuestros componentes. Para ello usemos el componente Proveedor de la librería 'react-redux'. Cambia crud-redux/src/index.js como sigue-
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import postReducer from './reducers/postReducer';
const store = createStore(postReducer);
ReactDOM.render(
, document.getElementById('root'));
El componente Proveedor utiliza algo llamado React Context que le permite pasar el objeto de la tienda a cualquier componente que necesite acceder a él sin necesidad de pasar puntales. Aquí estamos envolviendo el componente App que es nuestro componente padre con el componente Provider para que todos los componentes hijo de nuestra aplicación puedan acceder a la tienda. El componente Proveedor toma la tienda como un accesorio.
Volvamos a nuestro componente PostForm y conectémoslo a nuestra tienda para que podamos enviar acciones.
import React, { Component } from 'react';
class PostForm extends Component {
handleSubmit = (e) => {
e.preventDefault();
const title = this.getTitle.value;
const message = this.getMessage.value;
const data = {
id: new Date(),
title,
message
}
}
render() {
return (
Create Post