Saltar al contenido

Cómo obtener los datos en React Redux usando HooksDec, 16thIn este tutorial, vamos a aprender acerca de hacer un peticiones http …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de hacer un HTTP solicitudes en redux utilizando ganchos y middleware redux-golpe seco.

Este tutorial asume que ya tiene algunos conocimientos básicos sobre cómo utilizar engancha en reaccionar-redux o se puede retirar mi Reaccionar Redux engancha tutorial.

CodeSandbox demostración

En primer lugar, tenemos que instalar un llamado Redux-golpe seco paquete que ayuda a escribir la lógica asíncrona en nuestro código como peticiones http.

Abra su terminal y ejecutar comandos a continuación.

npm i redux-thunk

Ahora necesitamos para que el golpe seco mediante la importación del paquete golpe seco redux-.

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";import thunk from "redux-thunk";import { Provider } from "react-redux";
import reducer from "./store";
import App from "./app";

const store = createStore(reducer, applyMiddleware(thunk));
const rootElement = document.getElementById("root");
ReactDOM.render(


,
rootElement
);

En el código anterior, pasamos golpe seco como argumento al método de applyMiddleware () con el código de procesador está habilitado.

traer los datos

Estamos utilizando axios http biblioteca de cliente para realizar peticiones HTTP.

Esta es nuestra función reductor con FETCH_DATA tipo de acción.

function reducer(state = { data: "" }, action) {
switch (action.type) {
case "FETCH_DATA":
return {
...state,
data: action.data
};
default:
return state;
}
}

export default reducer;

Ahora en nuestro archivo app.js, estamos haciendo una petición http haciendo clic en un botón de recuperación de datos, cada vez que tenemos una respuesta de nuestra solicitud nos estamos despachando el tipo de acción FETCH_DATA con una carga útil.

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

function App() {
const content = useSelector(state => state); /his hook gives us redux store state
const dispatch = useDispatch(); /his hook gives us dispatch method

//async action
function getData() {
return dispatch => {
axios.get("https://jsonplaceholder.typicode.comodos/1") .then(res => dispatch({ type: "FETCH_DATA", data: res.data }) );
};
}

function onFetchdata() {
//invoking action
dispatch(getData());
}

return (

{content.data && (

  • {content.data.id}
  • {content.data.title}

)}

);
}

export default App;

Nota: También podemos despachar acciones cada vez que los montajes de componentes mediante el uso de gancho useEffect.

useEffect ejemplo gancho

En este ejemplo, se están despachando la acción cada vez que los montajes de componentes inicialmente.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

function App() {
const content = useSelector(state => state);
const dispatch = useDispatch();

function getData() {
return dispatch => {
axios.get("https://jsonplaceholder.typicode.comodos/1")
.then(res =>
dispatch({
type: "FETCH_DATA",
data: res.data
})
);
};
}

useEffect(() => { dispatch(getData()); }, []); return (

{content.data && (

  • {content.data.id}
  • {content.data.title}

)}

);
}

export default App;

Código caja de arena de demostración