Saltar al contenido

la administración del estado en React usando Redux y reaccionar-reduxJan, 26thIn este tutorial, vamos a aprender acerca de cómo administrar el estado …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo administrar el estado de reaccionar mediante el uso de las bibliotecas y redux-redux reaccionar.

Si usted quiere aprender lo básico sobre redux continuación, echa un vistazo a tutorial anterior Reaccionar Redux beginnerstutorial.

Introducción

En primer lugar, necesitamos instalar el nuevo reaccionan aplicación utilizando una herramienta de crear una reacción aplicación de línea de comandos.

Ejecutar el siguiente comando para instalar la aplicación reaccionar.

npx create-react-app redux-tutorial

Este comando por encima de descargar el reaccionan archivos relacionados en la carpeta “redux-tutorial”.

Una vez que ha instalado con éxito ahora cambiar su directorio de trabajo al directorio de aplicación mediante el uso de belowcommands.

cd redux-tutorial
npm start

comando de arranque NPM es a su vez usada en el servidor de desarrollo local en localhost: 3000.

Nota: Si usted se pegó en cualquier parte de este tutorial a continuación repositorio de código de pago por favor en GitHub

Instalación Biblioteca Redux

vamos a instalar el redux y reaccionar-redux biblioteca mediante los comandos siguientes.

npm i redux react-redux

redux : Redux se utiliza para administrar el estado

reaccionar-redux : Se utiliza para hacer los enlaces entre la biblioteca redux y reaccionar.

Ahora abra la carpeta de “redux-tutorial” mediante el uso de su CodeEditor favorito. función

Reductor función

Reductor es una pura función que toma el estado de la aplicación anterior, el tipo de acción andreturns el siguiente estado sin mutar el estado anterior.

Redux sigue la inmutabilidad que significa que no estamos mutando el estado de la aplicación en lugar de que vamos a volver al nuevo estado de la aplicación .

Redux gestiona todo el estado de la aplicación en el único objeto de JavaScript.

crear una carpeta llamada nuevos reductores en su directorio src.

Dentro de los reductores, carpeta de crear un nuevo archivo llamado reducer.js.

const intialState = { name: "reactgo", allNames: []}
const reducer = (state = intialState, action) => {

if (action.type === "ADDNAME") {
return {
allNames: state.allNames.concat(state.name),
name: ""
}
}

if (action.type === "CHANGE_NAME") {
return {
...state,
name: action.name
}
}

return state
}

export default reducer;

En el código anterior, hemos definido una función reductora con el estado dos parámetros y action.Inside la función de reductor, hemos añadido dos sentencias condicionales.

Nuestro objetivo inicial es el estado {nombre: “”, AllNames: []}.

Conexión reaccionar con Redux

Su tiempo para conectar nuestro reaccionan aplicación con el redux.

Abra su index.js presente dentro de la carpeta su src. presentar

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'import { Provider } from 'react-redux';import App from './App';
import reducer from './reducers/reducer'

const store = createStore(reducer);
ReactDOM.render(
, document.getElementById('root'));

Dentro de los index.js importamos función createstore del componente andProvider biblioteca ‘redux’ de la biblioteca reaccionar-redux.

invocamos la función createstore pasando la función de reductor como un argumento y que envuelva el componente con el componente pasando un atributo de la tienda.

usos de componentes de la API de contexto reaccionar para pasar el estado a través del árbol de componentes.

el acceso a redux estado de los componentes

Ahora podemos acceder a nuestro estado redux directamente de los componentes reaccionar.

Abrir el archivo de app.js y añadir el siguiente código.

mapStatetoProps ejemplo

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

class App extends Component {

render() {
return (

);
}
}

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

export default connect(mapStatetoProps)(App);

Aquí primera importó el componente de orden superior llamada de conexión de la reaccionará-redux librarythen definimos una función mapStatetoProps con el parámetro de estado.

Mediante el uso de estado parámetro podemos acceder al estado redux que hemos definido dentro de la función reductor.

Cualquier propiedad que hemos definido dentro de la función mapStatetoProps puede disponible como puntales en el interior del componente de aplicación, por ejemplo, en el componente anterior hemos devuelto un objeto con el nombre {:} state.name para que podamos acceder a esa nombres de las propiedades del componente de Aplicación como this.props.name.

Por fin, tenemos que invocar la función de conexión pasando los mapStatetoProps como argumento.

Si abre su navegador ahora se puede ver “reactgo” se muestra en el interior del campo de entrada.

mutar el estado Redux

El árbol del estado redux se de sólo lectura , no puede mutar el estado directamente.

En redux, sólo podemos mutar el estado mediante la invocación de un método de envío con el tipo de acción. Si

archivo que reducer.js abiertas se puede ver que son dos tipos de acciones disponibles que son Addname y Change_Name.

const intialState = { name: "reactgo", allNames: []}

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

if (action.type === "ADDNAME") { return {
allNames: state.allNames.concat(state.name),
name: ""
}
}

if (action.type === "CHANGE_NAME") { return {
...state,
name: action.name
}
}

return state
}

export default reducer;

si invocamos el método de despacho con el tipo Addname entonces estamos volviendo el nuevo estado con thename valores de las propiedades se añaden a la matriz AllNames y restablecer la propiedad de nombre. Véase la

Let en acción.

Abrir el archivo de app.js añadir el siguiente código.

mapDispatchtoProps ejemplo

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

class App extends Component {

handleNameChange = (e) => {
this.props.onChangeName(e.target.value)
}

render() {
return (

    {this.props.allNames && this.props.allNames.map(name => (

  • {name}
  • ))}

);
}
}

const mapStatetoProps = (state) => {
return {
name: state.name,
allNames: state.allNames
}
}

const mapDispatchtoProps = (dispatch) => {
return {
onChangeName: (name) => dispatch({ type: "CHANGE_NAME", name: name }),
onAddName: () => dispatch({ type: "ADDNAME" }),
}
}

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

En lo anterior, se define una función mapDispatchtoProps donde obtenemos el método de envío como un parámetro de función.

Dentro de los mapDispatchtoProps funcionan volvimos un objeto con dos propiedades onChangeName andonAddName

onChangeName: nos ayuda a despachar la propiedad nombre del tipo de acción Change_Name y la carga útil que se añade por el usuario.

onAddName: nos ayuda a enviar el tipo de acción Addname.

Nos puede acceder a estas dos propiedades en el interior del componente de aplicación como una utilería. La prueba de

Vamos ahora en el navegador.

Manejo de los errores

También podemos controlar los errores mediante la creación de un tipo de error dentro de la función reductor.

actualizar el archivo reducer.js con código de abajo

const intialState = { name: "reactgo", allNames: [], error: "" }

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

if (action.type === "ADDNAME") { return {
allNames: state.allNames.concat(state.name),
name: ""
}
}

if (action.type === "CHANGE_NAME") { return {
...state,
name: action.name }
}

if (action.type === "ERROR") { return {
...state,
error: action.error
}
}

return state
}
export default reducer;

En el código anterior, actualizamos nuestra función reductora mediante la adición de AA tercera declaración condicional con el tipo de error y la propiedad de error se añade al objeto ourinitialState. de

Let despachar el tipo de error Acción en nuestro componente de aplicaciones.

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

class App extends Component {

handleNameChange = (e) => {
this.props.onChangeName(e.target.value)
}

handleClick = () => {

if (this.props.name) {
this.props.onAddName()
} else {
this.props.onError("Name field cannot be empty") }

}

render() {
return (


{this.props.error}

    {this.props.allNames && this.props.allNames.map(name => (

  • {name}
  • ))}

);
}
}

const mapStatetoProps = (state) => {
return {
name: state.name,
error: state.error, allNames: state.allNames
}
}

const mapDispatchtoProps = (dispatch) => {
return {
onChangeName: (name) => dispatch({ type: "CHANGE_NAME", name: name }),
onAddName: () => dispatch({ type: "ADDNAME" }),
onError: (err) => dispatch({ type: "ERROR", error: err }) }
}

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

En el anterior, hemos añadido una comprobación condicional dentro del método handleClick por lo thatwhenever un usuario intenta haga clic en un botón Añadir nombre sin necesidad de escribir el nombre, estamos invocando el método this.props.onError haciendo pasar un mensaje de error . salida

refactorización del código

de Es difícil escribir los tipos de acción en muchos lugares de forma manual por lo que estamos acreating dos nuevos archivos que son archivos actionCreators.js y actionTypes.js

En actionTypes.js somos la definición de todos nuestros tipos de acciones.

Actualmente, tenemos tres tipos de acciones en nuestra Change_Name aplicación, Addname y ERROR

Crear una acciones de carpeta en el directorio src.

Dentro de las acciones de carpeta crear un archivo actionTypes.js y el siguiente código.

export const ADDNAME = "ADDNAME";
export const CHANGE_NAME = "CHANGE_NAME";
export const ERROR = "ERROR";

crear un nuevo archivo llamado actionCreators.js dentro de su carpeta de acciones.

import { CHANGE_NAME, ADDNAME, ERROR } from './actionTypes'

export function changeName(name) {
return {
type: CHANGE_NAME,
name: name
}
}

export function addname() {
return {
type: ADDNAME
}
}
export function error(msg) {
return {
type: ERROR,
error: msg
}
}

En lo anterior, hemos creado tres creadores de acción el cual regresan los tres differenttype de acciones. creadores

de acción son las funciones de JavaScript que devuelven los objetos con un tipo de acciones.

actualizar el archivo reducer.js con actionTypes

import { CHANGE_NAME, ADDNAME, ERROR } from '../actions/actionTypes'

const intialState = { name: "reactgo", allNames: [], error: "" }

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

if (action.type === ADDNAME) {
return {
allNames: state.allNames.concat(state.name),
name: ""
}
}

if (action.type === CHANGE_NAME) {
return {
...state,
name: action.name
}
}

if (action.type === ERROR) {
return {
...state,
error: action.error
}
}

return state

}
export default reducer;

actualización del archivo app.js con los creadores de acción.

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { addname, error, changeName } from './actions/actionCreators'
import './App.css'

class App extends Component {

handleNameChange = (e) => {
this.props.onChangeName(e.target.value)
}

handleClick = () => {

if (this.props.name) {
this.props.onAddName()
} else {
this.props.onError("Name field cannot be empty")
}

}

render() {
return (


{this.props.error}

    {this.props.allNames && this.props.allNames.map(name => (

  • {name}
  • ))}

);
}
}

const mapStatetoProps = (state) => {
return {
name: state.name,
error: state.error,
allNames: state.allNames
}
}

const mapDispatchtoProps = (dispatch) => {
return {
onChangeName: (name) => dispatch(changeName(name)),
onAddName: () => dispatch(addname()),
onError: (err) => dispatch(error(err))
}
}

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

¿Usted ha visto ahora nuestro código es un poco organizado ?.

Código

repository