Cómo usar Redux en proyectos de React (tutorial detallado)
Prólogo
Tal vez su proyecto actual no haya alcanzado el nivel de aplicación de Redux, pero no está de más conocerlo con anticipación. Este artículo se tomará la molestia de presentarlo. uso de Redux
Concepto
Primero, ¿qué frameworks y herramientas usaremos?
React
UI Framework
Redux
Herramienta de gestión de estado, no tiene nada que ver con React, otros frameworks de UI pueden usar Redux
react-redux
Complemento de React, su función es facilitar el uso de Redux en proyectos de React
react-thunk
Middleware, su función es: soportar operación asincrónica
Redux
Herramienta de gestión de estado, independiente de React: admite operación asincrónica
Estructura de directorios
Consejo: Omitido con Redux Directorios no relacionados
|-- src
|-- Directorio donde se almacena Redux
|--actions.js
|- - action.js
|- directorio de componentes
|- Test.jsx
|- Preparativos del portal del proyecto App.js
Paso 1: Proporcionar valores predeterminados Dado que Redux se usa para administrar datos, los datos deben tener valores predeterminados, por lo que colocamos los valores predeterminados del estado en el archivo state.js.
//state.js
//Declarar el valor predeterminado
//Enumeramos dos ejemplos a continuación
//Datos sincronizados: pageTitle
// Datos asincrónicos: infoList (obtenidos mediante una interfaz asincrónica en el futuro)
exportar valor predeterminado {
pageTitle: 'Home',
infoList : [
} Paso 2: Crear el reductor. Estos son los datos que realmente se utilizarán en el futuro. Los colocaremos de manera uniforme en el archivo reducers.js.
//. reducers.js
/ /Función de utilidad que organiza múltiples reductores y devuelve una colección de reductores
importar { combineReducers } desde 'redux'
/ default
importar defaultState desde '. /state.js'
// El reductor es una función
function pageTitle (state = defaultState.pageTitle, action) {
// Diferentes acciones Hay diferentes lógicas de procesamiento
switch (action.type) {
case 'SET_PAGE_TITLE':
return action.data
Predeterminado:
Estado de retorno
}
}
función infoList (estado = defaultState.infoList, acción) {
cambiar (acción.tipo) {
caso 'SET_INFO_LIST':
devolver acción.datos
Predeterminado:
Estado de retorno
p>
}
}
//Exportar todos los reductores
exportar combineReducers predeterminados({
pageTitle,
p>infoList
})Paso 3: Crear acciones, ahora hemos creado reductores pero no hay acciones correspondientes para operarlos, así que escribamos acciones
/ / action.js
// la acción también es una función
función de exportación setPageTitle (datos) {
return (dispatch, getState) =gt; p>
despacho({ tipo: 'SET_PAGE_TITLE', datos: datos })
}
}
función de exportación setInfoList (datos) {
return (dispatch, getState) =gt; {
// Utilice fetch para solicitudes asincrónicas
window.fetch('/api/getInfoList', {
método: 'GET',
encabezados: {
'Tipo de contenido': 'aplicación/json'
}
p>
}).then(res =gt; {
return res.json()
}).then(data =gt; {
let { código, datos } = datos
if (código === 0) {
despacho({ tipo: 'SET_INFO_LIST', datos: datos })
}
})
}
} El último paso: crear una instancia de almacenamiento, importar ReactDOM desde 'react-dom '
//Introducir componentes
importar TestComponent desde '.
/components/Test.jsx'
/ El proveedor es una de las dos herramientas principales de reaccionar-redux. Su función es la siguiente: pasar almacenamiento a cada componente del proyecto
/. La segunda herramienta es conectar, que se presentará más adelante
importar {Proveedor} desde 'react-redux'
// Importar la instancia de almacenamiento creada
importar almacenar desde '@/store/index.js'
// Render DOM
ReactDOM.render (
ReactDOM.p> (
lt; pgt;
{/* Pasar en la tienda como accesorio para que todos los componentes de la aplicación utilicen la tienda */}
lt; }gt;
lt;Componente de prueba /gt;
lt; /Providergt; /p>
document.getElementById('root')
), y finalmente nuestro componente: Test.jsx
/ Test.jsx
import React, { Component } de 'react'
// La función del método de conexión: pasar accesorios adicionales al componente y devolver el nuevo componente, el nuevo componente no se ve afectado en el proceso
importar { connect } desde 'reaccionar-redux'
// Introducir acciones
importar { setPageTitle, setInfoList } desde './store/actions.js'
clase Prueba extiende Componente {
constructor(props) {
super(props)
}
componenteDidMount () {
let { setPageTitle, setInfoList } = this.props
Componente de extensión de prueba de clase {
Constructor (props) = this.props
// Activa la operación setPageTitle
setPageTitle('new title')
// Activa la operación setInfoList
setInfoList()
}
render () {
// Deconstruir el espacio de almacenamiento de los accesorios
let { pageTitle, infoList } = this.props
// Deconstruir el espacio de almacenamiento de los accesorios
let { pageTitle, infoList } = this.props
// Deconstruir el espacio de almacenamiento de los accesorios
let { pageTitle , infoList= this .props
// Usar almacenamiento
return (
lt; pgt;
lt; h1gt; {pageTitle
}lt;/h1gt;
{
infoList.length gt; (
lt;ulgt;
{ p>
infoList.map((item, index) =gt; {
lt; ligt; {item.data}lt;/ligt;
})
}
lt /ulgt;
): nulo
}
lt;/pgt;
p>)
}
}
}
// mapStateToProps: asigna estados a accesorios de componentes
const mapStateToProps = (estado) =gt; {
return {
pageTitle: estado.pageTitle,
infoList: estado. infoList
}
}
// / mapDispatchToProps: envío de mapas a los accesorios del componente
const mapDispatchToProps = (dispatch, ownProps) = gt; {
Return {
setPageTitle (data) {
// Si no comprende la lógica aquí, consulte la introducción anterior a redux -thunk
despacho(setPageTitle(data))
// La ejecución de setPageTitle devuelve una función
// Esto es exactamente lo que hace redux-thunk: devuelve una función. uso del procesador: operación asincrónica
// El código anterior es equivalente a
/*dispatch((dispatch, getState) =gt; {
despacho({ escriba: 'SET_PAGE_TITLE', datos: datos })
)*
// El código anterior es equivalente al código anterior. p>
)*/
},
setInfoList (datos) {
despacho(setInfoList(datos))
}
}
}
}
}
exportar conexión predeterminada ( mapStateToProps, mapDispatchToProps)(Prueba)Tres principios de Redux
1. Fuente de datos única
El estado de toda la aplicación se almacena en el árbol de objetos, y el árbol de objetos solo existe en un único almacenamiento.
p>