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(&#39;root&#39;)
)

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: &#39;SET_PAGE_TITLE&#39;, 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!