Cas d'utilisation de Vuex dans React

Cette fois, je vais vous présenter un cas d'utilisation de Vuex dans React. Quelles sont les précautions lors de l'utilisation de Vuex dans React. Voici un cas pratique, jetons un coup d'oeil.

J'ai toujours été un fan inconditionnel de Redux, mais après avoir utilisé Vuex, j'ai déploré la rapidité avec laquelle j'ai démarré avec Vuex, alors j'ai eu l'idée d'écrire une bibliothèque de type Vuex qui peut être utilisé dans React, temporairement nommé Ruex.

Comment utiliser

1 : Créer une instance Store :

Identique à vuex, utiliser un seul L'arborescence d'état (un objet) contient tous les états au niveau de l'application (magasin).

Le magasin peut configurer l'état, les mutations, les actions et les attributs des modules :

1. état : stocker les données

2. mutations : changer d'état Le seul moyen est de soumettre une mutation

3. actions : l'action soumet une mutation au lieu de changer directement l'état. L'action peut contenir n'importe quelle opération asynchrone, déclencher des mutations et déclencher d'autres actions.

Prend en charge le middleware : le middleware sera exécuté avant et après le déclenchement de chaque mutation.

store.js :

import {createStore} from 'ruex'
const state = {
 total_num:1111,
}
const mutations = {
 add(state,payload){
 state.total_num += payload
 },
 double(state,payload){
 state.total_num = state.total_num*payload
 },
}
const actions = {
 addAsync({state,commit,rootState,dispatch},payload){
 setTimeout(()=>{
 commit('add',payload)
 },1000)
 },
 addPromise({state,commit,rootState,dispatch},payload){
 return fetch('https://api.github.com/search/users?q=haha').then(res=>res.json())
 .then(res=>{
 commit('add',1)
 dispatch('addAsync',1)
 })
 },
 doubleAsync({state,commit,rootState,dispatch},payload){
 setTimeout(()=>{
 commit('double',2)
 },1000)
 },
 doublePromise({state,commit,rootState,dispatch},payload){
 return fetch('https://api.github.com/search/users?q=haha').then(res=>res.json())
 .then(res=>{
 commit('double',2)
 dispatch('doubleAsync',2)
 })
 },
}
// middleware
const logger = (store) => (next) => (mutation,payload) =>{
 console.group('before emit mutation ',store.getState())
 let result = next(mutation,payload)
 console.log('after emit mutation', store.getState())
 console.groupEnd()
}
// create store instance
const store = createStore({
 state,
 mutations,
 actions,
},[logger])
export default store

Lier l'instance Store au composant

ruex fournit un fournisseur pour faciliter le store L'instance est enregistrée dans le contexte global. Semblable à React-Redux.

App.js :

import React from 'react'
import {Provider} from 'ruex'
import store from './store.js'
class App extends React.Component{
 render(){
 return (
  <Provider store={store} >
  <Child1/>
  </Provider>
 )
 }
}

Utiliser ou modifier les données sur la boutique

Une fois la liaison de la boutique terminée complété, en Les données sur l'état peuvent être utilisées dans le composant, et l'état peut être modifié en déclenchant des mutations ou des actions. Pour des méthodes spécifiques, veuillez vous référer à la méthode de liaison de React-Redux : utiliser des composants de connexion d'ordre supérieur.

Child1.js :

import React, {PureComponent} from 'react'
import {connect} from 'ruex'
class Chlid1 extends PureComponent {
 state = {}
 constructor(props) {
 super(props);
 }
 render() {
 const {
 total_num,
 } = this.props
 return (
 <p className=&#39;&#39;>
 <p className="">
 total_num: {total_num}
 </p>
 <button onClick={this.props.add.bind(this,1)}>mutation:add</button>
 <button onClick={this.props.addAsync.bind(this,1)}>action:addAsync</button>
 <button onClick={this.props.addPromise.bind(this,1)}>action:addPromise</button>
 <br />
 <button onClick={this.props.double.bind(this,2)}>mutation:double</button>
 <button onClick={this.props.doubleAsync.bind(this,2)}>action:doubleAsync</button>
 <button onClick={this.props.doublePromise.bind(this,2)}>action:doublePromise</button>
 </p>)
 }
}
const mapStateToProps = (state) => ({
 total_num:state.total_num,
})
const mapMutationsToProps = ['add','double']
const mapActionsToProps = ['addAsync','addPromise','doubleAsync','doublePromise']
export default connect(
 mapStateToProps,
 mapMutationsToProps,
 mapActionsToProps,
)(Chlid1)

API :

1. mapStateToProps : lier les données sur l'état à l'état On actuel les accessoires du composant.

2. mapMutationsToProps : lier les mutations aux accessoires. Par exemple : la mutation peut être déclenchée par this.props.add(data) lors de l'appel, et le paramètre data sera reçu par le paramètre payload de la mutation.

3. mapActionsToProps : lier les actions aux accessoires.

Implémentation interne

ruex utilise en interne immer pour maintenir les mises à jour de l'état du magasin, donc en cas de mutations, il peut être modifié directement Les propriétés d'un objet changent d'état sans renvoyer un nouvel objet. Par exemple :

const state = {
 obj:{
 name:'aaaa'
 }
}
const mutations = {
 changeName(state,payload){
 state.obj.name = 'bbbb'
 // instead of 
 // state.obj = {name:'bbbb'}
 },
}

prend en charge les modules (l'espace de noms n'est pas encore pris en charge)

prend en charge le middleware. Remarque : les actions ont implémenté des fonctions similaires à redux-thunk

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'utilisation des sockets slot dans les composants vue

Explication détaillée de l'utilisation de machines à sous dans Vue

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!