Heim > Artikel > Web-Frontend > So verwenden Sie Redux in React-Projekten (ausführliches Tutorial)
Dieser Artikel stellt hauptsächlich detailliert vor, wie man Redux elegant in React-Projekten verwendet. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
Vorwort
Vielleicht hat Ihr aktuelles Projekt noch nicht das Niveau der Anwendung von Redux erreicht, aber es schadet nicht, es im Voraus zu verstehen. Dieser Artikel wird nicht jedem helfen Verwenden Sie Redux
Konzept
Welche Frameworks und Tools werden wir zunächst verwenden?
React
UI-Framework
Redux
Statusverwaltungstool, hat nichts mit React zu tun , Andere UI-Frameworks können auch Redux verwenden
react-redux
React-Plug-in, das die Verwendung von Redux erleichtert
reagieren Sie in React-Projekten -thunk
Middleware, Rolle: Unterstützung asynchroner Aktionen
Verzeichnisstruktur
Tipps: Verzeichnisse, die nichts mit Redux zu tun haben wurden weggelassen
|--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-- state.js |-- components 组件目录 |-- Test.jsx |-- App.js 项目入口
Vorbereitung
Schritt 1: Standardwerte bereitstellen Da Redux zum Verwalten von Daten verwendet wird, müssen die Daten Standardwerte haben, daher legen wir die Standardwerte fest Wert des Staates Platzieren Sie ihn einheitlich in der Datei „state.js“
// state.js // 声明默认值 // 这里我们列举两个示例 // 同步数据:pageTitle // 异步数据:infoList(将来用异步接口获取) export default { pageTitle: '首页', infoList: [] }
Schritt 2: Erstellen Sie einen Reduzierer, der die Daten enthält, die in Zukunft tatsächlich verwendet werden. Wir werden ihn einheitlich in der Datei „reducers.js“ platzieren
// reducers.js // 工具函数,用于组织多个reducer,并返回reducer集合 import { combineReducers } from 'redux' // 默认值 import defaultState from './state.js' // 一个reducer就是一个函数 function pageTitle (state = defaultState.pageTitle, action) { // 不同的action有不同的处理逻辑 switch (action.type) { case 'SET_PAGE_TITLE': return action.data default: return state } } function infoList (state = defaultState.infoList, action) { switch (action.type) { case 'SET_INFO_LIST': return action.data default: return state } } // 导出所有reducer export default combineReducers({ pageTitle, infoList })
Schritt 3 Schritt: Aktion erstellen Jetzt haben wir Reduzierer erstellt, aber es gibt keine entsprechende Aktion, um sie zu bedienen, also schreiben wir eine Aktion
// actions.js // action也是函数 export function setPageTitle (data) { return (dispatch, getState) => { dispatch({ type: 'SET_PAGE_TITLE', data: data }) } } export function setInfoList (data) { return (dispatch, getState) => { // 使用fetch实现异步请求 window.fetch('/api/getInfoList', { method: 'GET', headers: { 'Content-Type': 'application/json' } }).then(res => { return res.json() }).then(data => { let { code, data } = data if (code === 0) { dispatch({ type: 'SET_INFO_LIST', data: data }) } }) } }
Der letzte Schritt: Store-Instanz erstellen
// index.js // applyMiddleware: redux通过该函数来使用中间件 // createStore: 用于创建store实例 import { applyMiddleware, createStore } from 'redux' // 中间件,作用:如果不使用该中间件,当我们dispatch一个action时,需要给dispatch函数传入action对象;但如果我们使用了这个中间件,那么就可以传入一个函数,这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用,对于异步action很有用 import thunk from 'redux-thunk' // 引入reducer import reducers from './reducers.js' // 创建store实例 let store = createStore( reducers, applyMiddleware(thunk) ) export default store
Das war's, wir haben alle Vorbereitungsarbeiten für die Verwendung von Redux abgeschlossen und werden dann Redux in der React-Komponente verwenden
Beginnen Sie mit der Verwendung
Schreiben wir zunächst die Eintragsdatei der Anwendung APP.js
import React from 'react' import ReactDOM from 'react-dom' // 引入组件 import TestComponent from './components/Test.jsx' // Provider是react-redux两个核心工具之一,作用:将store传递到每个项目中的组件中 // 第二个工具是connect,稍后会作介绍 import { Provider } from 'react-redux' // 引入创建好的store实例 import store from '@/store/index.js' // 渲染DOM ReactDOM.render ( ( <p> {/* 将store作为prop传入,即可使应用中的所有组件使用store */} <Provider store = {store}> <TestComponent /> </Provider> </p> ), document.getElementById('root') )
Das letzte ist unsere Komponente: Test.jsx
// Test.jsx import React, { Component } from 'react' // connect方法的作用:将额外的props传递给组件,并返回新的组件,组件在该过程中不会受到影响 import { connect } from 'react-redux' // 引入action import { setPageTitle, setInfoList } from '../store/actions.js' class Test extends Component { constructor(props) { super(props) } componentDidMount () { let { setPageTitle, setInfoList } = this.props // 触发setPageTitle action setPageTitle('新的标题') // 触发setInfoList action setInfoList() } render () { // 从props中解构store let { pageTitle, infoList } = this.props // 使用store return ( <p> <h1>{pageTitle}</h1> { infoList.length > 0 ? ( <ul> { infoList.map((item, index) => { <li>{item.data}</li> }) } </ul> ):null } </p> ) } } // mapStateToProps:将state映射到组件的props中 const mapStateToProps = (state) => { return { pageTitle: state.pageTitle, infoList: state.infoList } } // mapDispatchToProps:将dispatch映射到组件的props中 const mapDispatchToProps = (dispatch, ownProps) => { return { setPageTitle (data) { // 如果不懂这里的逻辑可查看前面对redux-thunk的介绍 dispatch(setPageTitle(data)) // 执行setPageTitle会返回一个函数 // 这正是redux-thunk的所用之处:异步action // 上行代码相当于 /*dispatch((dispatch, getState) => { dispatch({ type: 'SET_PAGE_TITLE', data: data }) )*/ }, setInfoList (data) { dispatch(setInfoList(data)) } } } export default connect(mapStateToProps, mapDispatchToProps)(Test)
Drei Prinzipien von Redux
1. Einzelne Datenquelle
Der Status der gesamten Anwendung wird in einem Objektbaum gespeichert, und dieser Objektbaum existiert nur in einem Speicher
2. Der Status ist schreibgeschützt
Das Einzige, was den Status der Methode ändert, besteht darin, eine Aktion auszulösen, bei der es sich um ein gewöhnliches Objekt handelt, das zur Beschreibung des aufgetretenen Ereignisses verwendet wird
3. Verwenden Sie reine Funktionen, um Änderungen durchzuführen
Um zu beschreiben, wie eine Aktion den Zustandsbaum verändert, müssen Sie Reduzierer schreiben
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Detaillierte Analyse des Vue Socket.io-Quellcodes
Verwendung von nativem JavaScript, um den Lupeneffekt zu erzielen
Gekapselte Cache-Klasse, implementiert als Cache über Redis in NodeJS
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Redux in React-Projekten (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!