Explication détaillée de l'utilisation de base de Redux (difficulté en maternelle, tant qu'on a les mains)

Explication détaillée du processus d'utilisation de base de Redux

documents d'apprentissage

Documentation chinoise : http://www.redux.org.cn/
Documentation anglaise : https://redux.js.org/
Github : https://github.com/reactjs/redux

Tout d'abord, qu'est-ce que redux

1. Introduction:

1. redux est une 状态管理bibliothèque JS dédiée à faire des choses (不是react插件库).
2. Il peut être utilisé dans react, angular, vuedes projets tels que 基本与react配合使用.
3. Rôle : Gestion centralisée des applications React 多个组件共享的状态.

2. Dans quelles circonstances devez-vous utiliser redux

1. L'état d'un composant doit être disponible pour les autres composants 随时拿到（共享）.
2. Un composant doit changer l'état d'un autre composant ( 通信).
3. Principe général : 能不用就不用, si non utilisé 比较吃力才考虑使用.

3. Flux de travail Redux

Deux, les trois concepts de base de redux

1 action

1. objet d'action
2. Contient 2 types d'attributs : attribut d'identification, la valeur est une chaîne, unique, données
   d'attribut obligatoires : attribut de données, le type de valeur est arbitraire, attribut facultatif
   
3. Exemple : { type : 'ADD_STUDENT', données :{name : 'tom', age : 18} }

2，réducteur

1. Il est utilisé pour l'état d'initialisation et l'état de traitement.
2. Pendant le traitement, une fonction pure qui génère un nouvel état basé sur l'ancien état et l'action.

3，magasin

1. L'objet qui relie l'état, l'action et le réducteur
2. Comment obtenir cet objet ?

import {
    
    createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)

3. La fonction de cet objet ?
   getState() : obtenir l'état
   dispatch(action) : distribuer l'action, déclencher l'appel du réducteur, générer un nouvel état
   subscribe(listener) : enregistrer l'écouteur, lorsqu'un nouvel état est généré, il sera appelé automatiquement

Trois, l'API de base de redux

1，createstore()

Fonction : créer un objet de magasin contenant le réducteur spécifié

2, stocker l'objet

1. Rôle : l'objet de gestion principal de la bibliothèque redux
2. Il maintient en interne :

réducteur d'état

3. Méthode de base :

getState ()
dispatch (action)
s'abonner (écouteur)

4. Codage spécifique :

store.getState()
store.dispatch({type:'INCREMENT', nombre})
store.subscribe(rendre)

3，appliquerMiddleware()

Rôle : Middleware basé sur Redux (bibliothèque de plug-ins) sur l'application

4，combineReducers()

Rôle : fusionner plusieurs fonctions de réducteur

Quatrièmement, utilisez redux pour écrire des applications

1. Installer

npm install --save redux

2. Créez un nouveau fichier

Sous le chemin src, créez un nouveau fichier de magasin

3. Définissez l'entrepôt :

nouveau src/store/index.js

// 定义仓库
// 引入configureStore 定义仓库
import {
    
     configureStore } from "@reduxjs/toolkit";
// 导入counterSlice
import counter from "./counterSlice";
// 导出
export const store = configureStore({
    
    
  // 数据处理
  reducer: {
    
    
    counter
  }
});

4. Comment créer des données de compteur et modifier des données :

Nouveau src/store/counterSlice.js

// 创建计数器切片slice
// 导入创建切片的函数
import {
    
     createSlice } from "@reduxjs/toolkit";
// 定义初始化状态
const initialState = {
    
     value: 0 };
// 创建切片
const counterSlice = createSlice({
    
    
  // 切片名称
  name: "counter",
  // 初始化状态
  initialState,
  // 定义处理器
  reducers: {
    
    
    // 处理加法
    increment: state => {
    
    
      state.value += 1;
    },
    // 处理减法
    decrement: state => {
    
    
      state.value -= 1;
    },
    // 处理加法
    addValue: (state, action) => {
    
    
      state.value += action.payload;
    }
  }
});

// 导出动作
export const {
    
     increment, decrement, addValue } = counterSlice.actions;
// 导出处理器
export default counterSlice.reducer;
// 导出异步操作动作
export const syncAddvalue = value => dispatch => {
    
    
  setTimeout(() => {
    
    
    dispatch(addValue(value));
  }, 2000);
};

5. Utiliser redux dans les composants

Fichier src/views/ProductView.js :

import {
    
    
  increment,
  decrement,
  addValue,
  syncAddvalue
} from "../store/counterSlice";
import {
    
     useSelector, useDispatch } from "react-redux";
const ProductView = () => {
    
    
  // 获取仓库数据
  const count = useSelector(state => state.counter.value);
  // 获取修改仓库数据的工具
  const dispatch = useDispatch();
  return (
    <div>
      <p>
        仓库数据：{
    
    count}
      </p>
      <button onClick={
    
    () => dispatch(increment())}>+1</button>
      <button onClick={
    
    () => dispatch(decrement())}>-1</button>
      <button onClick={
    
    () => dispatch(addValue(5))}>+5</button>
      <button onClick={
    
    () => dispatch(syncAddvalue(10))}>两秒后+10</button>
    </div>
  );
};

export default ProductView;

Rendus :

Cinq, programmation asynchrone redux

1. Comprendre :

1. Redux ne peut pas effectuer de traitement asynchrone par défaut.
2. Parfois, l'application doit être dans redux中执行异步任务(ajax, timer)

2. Utilisez un middleware asynchrone

npm install --save redux-thunk

Six, réagir-redux

1. comprendre

1. Une bibliothèque de plugins React
2. Spécialement conçu pour simplifier l'utilisation de redux dans les applications de réaction

2. react-Redux divise tous les composants en deux catégories

1. Composants de l'interface utilisateur

1. Il est uniquement responsable du rendu de l'interface utilisateur sans aucune logique métier
2. Recevoir des données via des accessoires (données et fonctions générales)
3. N'utilise aucune API Redux
4. Généralement enregistré dans le dossier des composants

2. composant de conteneur

1. Responsable de la gestion des données et de la logique métier, non responsable de la présentation de l'interface utilisateur
2. API utilisant Redux
3. Généralement enregistré dans le dossier des conteneurs

3. API associées

1. Fournisseur : laissez tous les composants obtenir des données d'état

<Provider store={
    
    store}>
  <App />
</Provider>

2. connect : utilisé pour envelopper les composants de l'interface utilisateur afin de générer des composants de conteneur

import {
    
     connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

3. mapStateToprops : convertit les données externes (c'est-à-dire les objets d'état) en propriétés d'étiquette des composants de l'interface utilisateur

const mapStateToprops = function (state) {
    
    
  return {
    
    
    value: state
  }
}

4. mapDispatchToProps : convertit la fonction d'action de répartition en attribut d'étiquette du composant d'interface utilisateur

Sept, utilisez l'outil de débogage redux

1. Installez le plug-in du navigateur Chrome

2. Téléchargez le package de dépendance de l'outil

npm install --save-dev redux-devtools-extension

Huit, fonctions pures et fonctions d'ordre supérieur

1. Fonctions pures

1. Un type spécial de fonction : tant qu'il s'agit de la même entrée (paramètre réel), elle doit obtenir la même sortie (retour)
2. Les contraintes suivantes doivent être respectées

1. Ne pas écraser les données de paramètres
2. Ne produit aucun effet secondaire tel que les requêtes réseau, les périphériques d'entrée et de sortie
3. Les méthodes d'impureté telles que Date.now() ou Math.random() ne peuvent pas être appelées

3. La fonction réductrice de redux doit être une fonction pure

2. Fonctions d'ordre supérieur

1. Compréhension : une classe spéciale de fonctions

   1. Cas 1 : Le paramètre est une fonction
   2. Cas 2 : Le retour est une fonction

2. Fonctions communes d'ordre supérieur :

   1. Fonction de réglage de la minuterie
   2. forEach()/map()/filter()/reduce()/find()/bind() du tableau
   3. promesse
   4. La fonction connect dans react-redux

3. Rôle : peut réaliser des fonctions plus dynamiques et plus évolutives