Spezifische Schritte zur Verwendung von Vuex in React

Dieses Mal werde ich Ihnen die spezifischen Schritte zur Verwendung von Vuex in React vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vuex in React?

Ich war schon immer ein treuer Fan von Redux, aber nachdem ich Vuex verwendet hatte, war ich beeindruckt, wie schnell ich mit Vuex angefangen habe, und so kam mir die Idee, eine Vuex-ähnliche Bibliothek zu schreiben kann in React verwendet werden und trägt vorübergehend den Namen Ruex.

So verwenden Sie

1: Erstellen Sie eine Store-Instanz:

Wie vuex, Verwenden Sie einen einzelnen Zustandsbaum (ein Objekt), der alle Zustände (Speicher) auf Anwendungsebene enthält.

Store kann Status, Mutationen, Aktionen und Modulattribute konfigurieren:

1. Status: Daten speichern

2. Mutationen: Status ändern Die einzige Möglichkeit besteht darin, eine Mutation einzureichen

3. Aktionen: Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern. Die Aktion kann jede asynchrone Operation enthalten, Mutationen auslösen und andere Aktionen auslösen.

Unterstützt Middleware: Middleware wird vor und nach dem Auslösen jeder Mutation ausgeführt.

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

Binden Sie die Store-Instanz an die Komponente

ruex stellt einen Provider bereit, um dies zu erleichtern store Die Instanz wird im globalen Kontext registriert. Ähnlich wie 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>
 )
 }
}

Verwenden oder ändern Sie die Daten im Store

Nachdem die Store-Bindung erfolgt ist abgeschlossen, in Die Daten zum Zustand können in der Komponente verwendet werden, und der Zustand kann durch Auslösen von Mutationen oder Aktionen geändert werden. Spezifische Methoden finden Sie in der Bindungsmethode von React-Redux: Verwenden von Komponenten höherer Ordnung.

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: Binden Sie die Daten zum Status an den aktuellen On die Requisiten der Komponente.

2. mapMutationsToProps: Mutationen an Requisiten binden. Beispiel: Die Mutation kann beim Aufruf durch this.props.add(data) ausgelöst werden, und der Datenparameter wird vom Nutzlastparameter der Mutation empfangen.

3. mapActionsToProps: Aktionen an Requisiten binden.

Interne Implementierung

ruex verwendet intern immer, um Aktualisierungen des Geschäftsstatus zu verwalten, sodass es bei Mutationen geändert werden kann Direkt ändern die Eigenschaften eines Objekts den Status, ohne dass ein neues Objekt zurückgegeben wird. Zum Beispiel:

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

unterstützt Module (Namespace wird noch nicht unterstützt)

unterstützt Middleware. Hinweis: Aktionen haben ähnliche Funktionen wie redux-thunk implementiert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Slots/Scope-Slots in Vue

Die Verwendung von Slot-Sockets in Vue-Komponenten Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonSpezifische Schritte zur Verwendung von Vuex in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!