Comment utiliser Redux dans les projets React (tutoriel détaillé)

Cet article présente principalement en détail comment utiliser Redux avec élégance dans les projets React. Maintenant, je le partage avec vous et le donne comme référence.

Avant-propos

Peut-être que votre projet actuel n'a pas encore atteint le niveau d'application de Redux, mais il n'y a aucun mal à le comprendre à l'avance. Cet article n'aidera pas tout le monde. utiliser Redux

Concept

Tout d'abord, quels frameworks et outils allons-nous utiliser ?

React

Cadre d'interface utilisateur

Redux

Outil de gestion d'état, n'a rien à voir avec React , D'autres frameworks d'interface utilisateur peuvent également utiliser Redux

react-redux

Plug-in React, qui est utilisé pour faciliter l'utilisation de Redux

réagir dans les projets React -thunk

Middleware, rôle : prendre en charge l'action asynchrone

Structure des répertoires

Conseils : Répertoires sans rapport avec Redux ont été omis

|--src
 |-- store     Redux目录
  |-- actions.js
  |-- index.js
  |-- reducers.js
  |-- state.js
 |-- components  组件目录
  |-- Test.jsx
 |-- App.js    项目入口

Préparation

Étape 1 : Fournir des valeurs par défaut Puisque Redux est utilisé pour gérer les données, les données doivent avoir des valeurs par défaut, nous le ferons donc. state Les valeurs par défaut sont uniformément placées dans le fichier state.js

// state.js
// 声明默认值
// 这里我们列举两个示例
// 同步数据：pageTitle
// 异步数据：infoList（将来用异步接口获取）
export default {
 pageTitle: '首页',
 infoList: []
}

Étape 2 : Créez le réducteur, qui correspond aux données qui seront réellement utilisées à l'avenir. Nous le placerons uniformément dans. le fichier réducteurs.js

// 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
})

Étape 3 : Créer une action Nous avons maintenant créé des réducteurs, mais il n'y a pas d'action correspondante pour les faire fonctionner, alors écrivons l'action

// 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 })
  }
 })
 }
}

La dernière étape : créer une instance de magasin

// 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

À ce stade, nous avons terminé toutes les préparations pour l'utilisation de Redux. Commençons par utiliser Redux dans les composants React

.

Tout d'abord, écrivons le fichier d'entrée de l'application 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;)
)

Enfin nos composants : 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)

Trois principes de Redux

1. Source de données unique

L'état de l'ensemble de l'application est stocké dans une arborescence d'objets, et cette arborescence d'objets n'existe que dans un seul magasin

2. Il est en lecture seule

La seule façon de changer l'état est de déclencher une action. L'action est un objet courant utilisé pour décrire les événements qui se sont produits

Utilisez des fonctions pures pour effectuer des modifications

. 🎜>

Afin de décrire comment les actions modifient l'arbre d'état, vous devez écrire des réducteurs

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Analyse détaillée du code source de Vue Socket.io

Utilisation de JavaScript natif pour obtenir l'effet loupe

Classe de cache encapsulée implémentée en tant que cache via Redis dans nodejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!