ReduxGénéralités

ReduxEst unJavaScriptConteneur d'état, Fournir un Gestion de l'état.
ReduxDes applications cohérentes peuvent être construites,Fonctionne dans différents environnements et est facile à tester.

ReduxTrois noyaux

• Source unique de données
  Toute la demandestateEst stocké dans unobject treeMoyenne,Et ça.object treeIl n'existe qu'un seulstoreMoyenne.
  

• StateC'est en lecture seule
  Le seul changementstateLa méthode est de déclencheraction,actionEst un objet normal utilisé pour décrire un événement qui s'est produit.

• Utiliser des fonctions pures pour effectuer des modifications
  Pour décrireactionComment changerstate tree,Besoin d'écrirereducers.
  Reducers Juste une fonction pure ,Il reçoitstateEtaction,Et renvoie le nouveaustate.Peut être réutilisé,Peut contrôler l'ordre,Paramètres supplémentaires entrants.

ReduxComposition

StateStatut

Ce sont les données que nous envoyons .

ActionÉvénements

ActionEst de transférer les données de l'application àstorePorteur de,C'est...storeSource unique de données,En général,On peut passer parstore.dispatch()Oui.actionPasser àstore.
ActionL'essence estjsObjet,L'objet doit avoir untypePropriétés Pour représenter l'action à effectuer ,Dans la plupart des cas,typeSera défini comme une constante de chaîne.Mais dans le projet,Plus utileactionCréer une fonction.
C'est juste une description de ce qui va se passer ,Ne décrit pas comment mettre à jourstate.

Reducer

ReducerL'essence estFonctions,Il est utilisé pour répondre à l'envoiactions,Traité,Prends ça.stateEnvoyé àStore.
InReducerEn fonction,BesoinreturnValeur de retour,Voilà.StorePour recevoir des données.
La fonction reçoit deux arguments,Le premier argument est l'initialisationstate,Le deuxième paramètre estaction.

Store

StoreC'est ça.actionAvecreducer Connecté Objet.
Principales responsabilités：

• Maintenir l'applicationstate
• OffregetState()Méthode d'acquisitionstate
• Offredispatch()Envoyeraction
• Adoptionsubscribe()Pour enregistrer l'écoute
• Adoptionsubscribe()Valeur de retour pour déconnecter l'écoute

Processus

• CréationactionObjet（Doit contenirtypePropriétés）

const sendAction = ()=> {
    
    return {
    
        type:'send',
        value:'Je suis unaction'
    }
}

• CréationreducerTraitement（Une valeur de retour est requise）

//Créationreducer Fonctions pures Traitementaction
const initState = {
    
    value:'Par défaut'
}
const reducer = (state=initState.value,action)=> {
    
    //console.log('reducer:',state,action)
    switch (action.type) {
    
        case 'send':
            return action.value
        default:
            return state
    }
}

• AdoptioncreateStore()ConstruirestoreRéceptionreducer

//Construirestore
const store = createStore(reducer)
export default store

• Composant envoyéactionObjet
• Adoptionstore.subscribe() Écouter pour un nouvel état getState()

export default class Home extends Component {
    
    handle = ()=> {
    
        //EnvoyeractionObjet
        const action = sendAction()
        store.dispatch(action)
    }
    componentDidMount() {
    
        // Écouter pour un nouvel état 
        store.subscribe(()=> {
    
            //console.log('sub',store.getState())
            this.setState({
    })
        })
    }

    render() {
    
        return (
            <div>
                <button onClick={
    this.handle}>Commande - moi</button>
                <div>{
    store.getState()}</div>
            </div>

        )
    }
}

React-redux

react-redux- Oui.Redux Officially given for coordination ReactBibliothèque de liaison pour.
react-reduxCapable de faireReactComponent fromRedux storeMoyenne Lecture facile des données ,Et versstoreDistribution moyenneactionsPour mettre à jour les données.
react-redux Il y a deux éléments importants ：provider、connect.

Provider

Provider Enveloppé dans la couche externe de l'assemblage racine , Rendre accessible à tous les sous - ensembles State.
ProviderRéceptionstoreEn tant queprops,AdoptioncontextPasse en bas,Voilà.react N'importe quel composant peut passer par contextObtenirstore.

connect

Provider Composants internes si vous souhaitez utiliser stateDonnées dans,Il fautconnect Faire une couche d'emballage ,Pour êtreconnectRenforcer.
connect Est de faciliter l'accès de nos composants à storeDansstate.

Processus

Expéditeur：

import React,{
    Component} from "react";
import {
    connect} from "react-redux";

//Expéditeur
class Index extends Component {
    
    handle = ()=> {
    
        // Obtenir et envoyer action
        console.log(this.props)
        this.props.sendAction()
    }

    render() {
    
        return (
            <div>
                <button onClick={
    this.handle}>+</button>
            </div>
        );
    }
}

//La fonction doit avoir une valeur de retour
//Adoptionconnext Passer la valeur de retour de la méthode à l'intérieur 
const map = dispatch=> {
    
    return {
    
        sendAction: () => {
    
            dispatch({
    
                type:'add'
            })
        }
    }
}

//connect Premier paramètre entre parenthèses le premier est reçu   Le deuxième est envoyé 
// La deuxième parenthèse est la composante renforcée 
export default connect(null,map)(Index)

reducer：

const init = {
    
    count: 0
}

const reducer = (state = init,action)=> {
    
    switch (action.type) {
    
        case 'add':
            return {
    
                count:state.count+1
            }
        default:
            return state
}}

export default reducer

store:

import reducer from "./reducer";
import {
    createStore} from "redux";

const store = createStore(reducer)
export default store

provider：

function App() {
    
  return (
    <Provider store={
    store}>
        <div className="App">
            <Index/>
            <Hom/>
        </div>
    </Provider>
  );
}

Bénéficiaire：

import React,{
    Component} from "react";
import {
    connect} from "react-redux";

class Hom extends Component {
    
    render() {
    
        return (
            <div>
                {
    this.props.count}
            </div>
        )
    }
}

const map = (state)=> {
    
    console.log(state)
    return state
}
// Mise à jour reçue state
export default connect(map)(Hom)

Effets：