Saltar al contenido

Reaccionar Redux función de conexión tutorialNov, 17thIn este tutorial, vamos a aprender acerca de cómo conectar el reaccionan …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo conectar la aplicación reaccionan con la tienda redux mediante el uso de la función connect ().

Este es nuestro ejemplo redux tienda con dos tipos de acciones de incremento y decremento.

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

export default reducer;

Ahora, tenemos que instalar un nuevo paquete llamado reaccionar-redux que proporciona a reaccionar fijaciones para acceder a las acciones del almacén y despacho redux para actualizar la tienda.

Ejecutar el siguiente comando en su terminal para instalar el paquete. componente del proveedor

npm i react-redux

Reaccionar paquete redux nos da componente que nos ayuda a pasar la tienda redux a los componentes nestedreact.

necesitamos para envolver nuestro componente App de raíz con un componente pasando la tienda como un puntal. función

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

const store = createStore(reducer);

const rootElement = document.getElementById("root");
ReactDOM.render(

,
rootElement
);

connect ()

función de conexión nos da acceso al almacén redux dentro reaccionar componentes.

función de conexión lleva su componente reaccionan como un argumento y devuelve un nuevo componente con los datos de tienda de redux está disponible como un componente de apoyos.

función de conexión acepta dos argumentos opcionales que son mapStateToProps y mapDispatchToProps.

  • mapStateToProps: es una función que acepta estado como parámetro y devuelve un objeto.
  • mapDispatchToProps: es también una función que acepta el envío como un parámetro y devuelve unObjeto con funciones de despacho. Véase la

Let en acción.

import React, { Component } from "react";
import { connect } from "react-redux";
class App extends Component {
render() {
return (

{this.props.count}

);
}
}

const mapStateToProps = state => {
return {
count: state.count };
};

const mapDispatchToProps = dispatch => {
return {
increment: () => dispatch({ type: "INCREMENT" }), decrement: () => dispatch({ type: "DECREMENT" }) };
};

export default connect(mapStateToProps,mapDispatchToProps)(App);

En el código anterior, primero se importó función de conexión del paquete de reaccionar-redux continuación, creamos dos mapStateToProps funciones, mapDispatchToProps.

En la última línea, se invoca la función connect () pasando dos funciones y componentes de aplicaciones, de manera que podamos acceder a las funciones del Estado almacenar y expedir como accesorios en el interior de componentes de aplicaciones.

Bono

Si no les gusta para acceder a la tienda de estado redux que puede pasar el primer argumento como un valor nulo a la función Connect.

export default connect(null,mapDispatchToProps)(App);

Por defecto, el método de envío está disponible como un accesorio de componentes para que podamos enviar directamente las acciones dentro de un métodos de controlador de eventos.

import React, { Component } from "react";
import { connect } from "react-redux";

class App extends Component {

handleIncrement = () => {
this.props.dispatch({ type: "INCREMENT" }); };

handleDecrement = () => {
this.props.dispatch({ type: "DECREMENT" }); };

render() {
return (

{this.props.count}


);
}
}

const mapStateprops = state => {
return {
count: state.count
};
};

export default connect(mapStateprops)(App);