Saltar al contenido

Reaccionar Redux engancha tutorial con examplesNov, 15thIn este tutorial, vamos a aprender acerca de cómo reaccionan uso ganchos …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar ganchos reaccionan con una tienda Redux y realizar acciones.

Reaccionar ganchos API nos permite utilizar las funcionalidades y estatales del ciclo de vida de los componentes funcionales.

Este tutorial asume que ya tiene algunos conocimientos básicos sobre redux, si no sepa de ello se puede retirar mi redux tutorial.

Introducción

En primer lugar, estamos creando un nuevo proyecto reaccionan mediante el uso de la CLI crear una reacción aplicación.

Abra su terminal y ejecutar el siguiente comando.

npx create-react-app redux-hooks

Este comando anterior descargará el reaccionan archivos relacionados con las aplicaciones en la carpeta “redux ganchos”.

Ahora, tenemos que cambiar nuestro directorio a la carpeta “redux ganchos”.

cd redux-hooks

bibliotecas Instalación redux y reaccionar-redux

Ejecutar el siguiente comandos en el terminal para instalar las dos bibliotecas.

npm i redux react-redux

Configuración tienda redux

Ahora abre los ganchos redux carpeta en el editor de código favorito.

crear un nuevo archivo llamado store.js en la carpeta src y añadir el siguiente código.

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 una función reductor con dos tipos de acciones de incremento y decremento,

Ahora abra su index.js y añada el siguiente código.

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(


,
rootElement
);

Ahora nuestra configuración redux se ha completado ahora podemos acceder a la tienda Redux de los componentes funcionales utilizando ganchos reaccionar.

useSelector gancho (para acceder estado)

El useSelector gancho es similar a mapStatetoprops mediante el uso de este gancho se puede acceder a todo el estado tienda de redux.

El useSelector gancho también suscribirse a la tienda redux.

import React from "react";
import { useSelector } from "react-redux";
function App() {
const counter = useSelector(state => state);
return (

{counter.num}

);
}

export default App;

En el código anterior, primero se importó gancho useSelector de la biblioteca reaccionar-redux.

La useSelector () tendrá la función como un argumento y los devuelve el estado tienda de redux.

useDispatch gancho (acciones expedición)

El useDispatch () de gancho se usa para despachar las acciones.

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 (

{counter.num}

);
}

export default App;

aquí estamos despachando el INCREMENTO tipo de acción cada vez que haga clic en un botón de incremento.