Tutorial de ganchos de React Redux con ejemplos

Tutorial de ganchos de React Redux con ejemplos

En este tutorial, aprenderemos cómo usar ganchos de reacción con una tienda redux y realizar acciones.

La API de React Hooks nos permite usar la funcionalidad de estado y ciclo de vida en componentes funcionales.

Este tutorial asume que ya tienes conocimientos básicos de redux, si no los tienes, puedes consultar mi tutorial de redux.

Índice
  1. Comenzar
  2. Instalación de las bibliotecas redux y react-redux
  3. Configurar una tienda redux
  4. gancho useSelector (estado de acceso)
  5. hook useDispatch (acciones de envío)

Comenzar

Primero, creamos un nuevo proyecto React usando el create-react-app hacer clic.

Abra su terminal y ejecute el siguiente comando.

npx create-react-app redux-hooks

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

Ahora necesitamos cambiar nuestro directorio de trabajo a la carpeta "redux-hooks".

Instalación de las bibliotecas redux y react-redux

Ejecute los siguientes comandos en su terminal para instalar ambas bibliotecas.

Configurar una tienda redux

Ahora abre tu redux-hooks carpeta en su editor de código favorito.

crear un nuevo archivo llamado store.js en tu src carpeta y agregue el código a continuación.

tienda.js

function reducer(state = { num: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":      return {
        ...state,
        num: state.num + action.step
      };
    case "DECREMENT":      return {
        ...state,
        num: state.num - action.step
      };
    default:
      return state;
  }
}

export default reducer;

En el código anterior, hemos creado un reducer() función con dos tipos de acción INCREMENT Y DECREMENT.

Ahora abre tu index.js y agregue el código a continuación.

índice.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";import { createStore } from "redux";import "./styles.css";
import reducer from "./store.js";import App from "./app";

const store = createStore(reducer);
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Con esto, nuestra configuración de redux está completa, ahora podemos acceder a la tienda de redux desde los componentes de trabajo usando ganchos de reacción.

gancho useSelector (estado de acceso)

EL useSelector gancho es similar a mapStatetoprops usando este gancho podemos acceder a todo el estado de la tienda redux.

EL useSelector hook también se suscribirá a la tienda redux.

Aplicación.js

import React from "react";
import { useSelector } from "react-redux";
function App() {
  const counter = useSelector(state => state);
  return (
    <div className="App">
      <h1>{counter.num}</h1>    </div>
  );
}

export default App;

En el código anterior, primero importamos useSelector gancho de la react-redux biblioteca.

EL useSelector() tomará la función como argumento y devolverá el estado de la tienda redux.

hook useDispatch (acciones de envío)

EL useDispatch() gancho se utiliza para enviar las acciones.

Aplicación.js

import React from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
function App() {
  const counter = useSelector(state => state);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>{counter.num}</h1>
      <button
        onClick={() =>          dispatch({            type: "INCREMENT",            step: 1          })        }
      >
        Increment
      </button>
    </div>
  );
}

export default App;

Aquí distribuimos el tipo de acción. INCREMENT cada vez que hacemos clic en un Increment botón.

Si quieres conocer otros artículos parecidos a Tutorial de ganchos de React Redux 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