Saltar al contenido

Http solicitudes en Redux utilizando Redux-thunkJan, 11thIn este tutorial, vamos a aprender acerca de cómo obtener los datos de la …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo obtener los datos de las API de backend en redux mediante el uso de ‘redux-golpe seco’ middleware. creadores de acción

  • sincrónicos creadores de acción
  • asincrónicos
  • petición http ejemplo

Introducción

Estamos utilizando la herramienta de crear una reacción aplicación de línea de comandos para generar el nuevo reaccionan repetitivo aplicación.

npx create-react-app http-redux

Este comando anterior descargará el reaccionan app archivos relacionados dentro de la carpeta “http-redux”.

Cambiar el directorio de trabajo “http-redux” utilizando comandos a continuación.

cd http-redux
npm start

comando de arranque NPM se utiliza para encender el servidor reaccionan de desarrollo de aplicaciones.

Conexión reacciona con redux

Ahora tenemos que hacer una conexión entre la reacción y bibliotecas redux para eso necesitamos a downloadtwo paquetes desde el MNP.

ejecute los siguientes comandos para instalar el Redux y reaccionan-redux paquetes.

npm i redux react-redux

Redux es una biblioteca de gestión estatal para aplicaciones de JavaScript.

Reaccionar-redux se utiliza para hacer una conexión entre reaccionar y redux.

Abrir el “http-redux” carpeta mediante el editor de código favorito y crear una carpeta nueva llamada reducersinside su directorio src.

En reductores carpeta crear un nuevo archivo llamado myreducer.js y añadir el siguiente código.

const intialState = {
num: 0
}

const reducer = (state = intialState, action) => {

switch (action.type) { case "INCREMENT": return { num: state.num + 1 } default: return state }

}

export default reducer

Aquí hemos creado una pequeña función de reductor con un tipo de acción “incremento”.

Abrir el archivo de index.js y el siguiente código.

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 reducer from './reducers/myreducer'

const store = createStore(reducer);

ReactDOM.render(
, document.getElementById('root'));

Ahora hemos conectado con éxito reacciona con redux. creadores de acción

sincrónicos creadores acción

sincrónicos son sólo funciones que devuelven un ofaction objeto con el tipo y la carga útil.

Vamos a crear un creador acción síncrona.

crear un nuevo archivo llamado actions.js en su carpeta src. el uso de

export const increment = () => {
return {
type: "INCREMENT"
}
}

dejar que esta acción creadora de despachar la acción de incremento.

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux'
import { increment } from './actions'

class App extends Component {
render() {
return (

{this.props.num}

);
}
}

const mapStatetoProps = (state) => {
return { num: state.num }
}

const mapDispatchtoProps = (dispatch) => {
return {
onIncrement: () => dispatch(increment())
}
}

export default connect(mapStatetoProps, mapDispatchtoProps)(App);

Este ejemplo asíncrono acción creadora. creadores de acción

asincrónicos creadores de acción

asincrónicos no devuelven el objeto inmediato con el tipo de acción y la carga útil en lugar de que devuelve la función con parámetros de despacho y getState.

Debido a que en un código asíncrono como si ir a buscar algo de la API de backend se necesita algún tiempo para obtener los datos desde el servidor de modo que no estamos despachando la acción inmediatamente en lugar de que aredispatching la acción sólo cuando los datos provienen de vuelta desde el servidor API. acciones

de Asynchronous tenemos que instalar un nuevo paquete llamado Redux-golpe seco.

npm i redux-thunk

redux-golpe seco es un middleware que nos ayuda a retrasar las acciones de su expedición.

Si quieren aprender sobre procesadores continuación, echa un vistazo a mi anterior tutorial.

una vez que se ha instalado con éxito el ‘redux-golpe seco’ ahora tenemos que configurar nuestro código para utilizar thismiddleware.

abierto sus index.js y actualización con la configuración redux-golpe seco.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'

import reducer from './reducers/myreducer'

const store = createStore(reducer, applyMiddleware(thunk));

ReactDOM.render(
, document.getElementById('root'));

En primer lugar, nos importó función applyMiddleware de la biblioteca ‘redux’, entonces hemos importado ‘golpe seco’ de la ‘redux-golpe seco.

A continuación, se invoca la función applyMiddleware pasando el golpe seco como su argumento.

Actualizar archivo de sus reducers.js con código de abajo.

const intialState = {
num: 0,
data: null,
error: ""
}

const reducer = (state = intialState, action) => {

switch (action.type) {
case "INCREMENT":
return { ...state, num: state.num + 1 }
case "FetchData":
return { ...state, data: action.data }
case "ERROR":
return { ...state, error: action.msg }
default:
return state
}

}

export default reducer

nos ponen al día nuestro archivo reducer.js mediante la adición de dos nuevos tipos de acción “FetchData” y “ERROR”.

Vamos a crear un creador acción asíncrono que nos ayuda a recuperar los datos.

actualización de su archivo actions.js con el código de abajo.

http solicita ejemplo

// synchronous action creator
export const increment = () => {
return {
type: "INCREMENT"
}
}

// asynchronous action creator
export const fetchData = () => {

return (dispatch) => {
return fetch('https://jsonplaceholder.typicode.comodos/1')
.then(response => response.json())
.then(json => dispatch(
{ type: "FetchData", data: json }))
.catch(err => dispatch(
{ type: "ERROR",msg: "Unable to fetch data" }))
}

}

En el código anterior, sólo enviamos la acción FetchData cada vez que llegan los datos de la API y que el envío de la acción de error en caso de que se produzca un error al recuperar los datos. de

Let despachar el creador acción asíncrona en nuestro componente de aplicaciones.

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux'
import { fetchData } from './actions'

class App extends Component {

componentDidMount() {
this.props.onFetchData()
}

render() {
return (

Fetching the data from the backend

{this.props.error &&

{this.props.error}

}

{this.props.data &&

  • id: {this.props.data.id}
  • title: {this.props.data.title}

}

);
}
}

const mapStatetoProps = (state) => {
return { num: state.num, data: state.data, error: state.error }}

const mapDispatchprops = (dispatch) => {
return { onFetchData: () => dispatch(fetchData()) }}

export default connect(mapStatetoProps, mapDispatchprops)(App);

En la componente de aplicación que llama la función this.props.onFetchData () dentro thecomponentDidMount () método de ciclo de vida.

Salida: Código

repositorio