React で Vuex を使用するための具体的な手順

今回は、React で Vuex を使用するための具体的な手順をお届けします。React で Vuex を使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

私はずっ​​と Redux の熱心なファンでしたが、Vuex を使用した後、自分がいかに早く Vuex を使い始めることができたかを嘆いていたので、React で使用できる Vuex のようなライブラリを作成するというアイデアを思いつきました。一時的にルークスと名付けられました。

使い方

1: Store インスタンスを作成します:

vuex と同様に、単一の状態ツリー (1 つのオブジェクト) を使用して、すべてのアプリケーションレベルの状態 (ストア) を含めます。

store は状態、突然変異、アクション、およびモジュールの属性を設定できます:

1. state: データを保存します

2. mutations: 状態を変更する唯一の方法は突然変異を送信することです

3. actions: アクションは変更ではなく突然変異を送信しますステータスを直接。アクションには、任意の非同期操作を含めたり、突然変異をトリガーしたり、他のアクションをトリガーしたりできます。

は

ミドルウェアをサポートします: ミドルウェアは、各突然変異がトリガーされる前後に実行されます。

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

Storeインスタンスをコンポーネントにバインドします

ruexは、グローバルコンテキストへのストアインスタンスの登録を容易にするプロバイダーを提供します。反応 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>
 )
 }
}

ストア上のデータを使用または変更します

ストアのバインディングが完了すると、状態のデータをコンポーネントで使用でき、ミューテーションをトリガーすることで状態を変更できますまたはアクション。具体的な方法については、react-reduxのバインド方法：上位コンポーネントを接続する方法を参照してください。

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: 状態の

   data を現在のコンポーネントの props にバインドします。

2. mapMutationsToProps: ミューテーションをプロパティにバインドします。例: 呼び出し時に this.props.add(data) によって突然変異をトリガーでき、データ パラメーターは突然変異のペイロード パラメーターによって受信されます。

3. mapActionsToProps: アクションをプロパティにバインドします。

内部実装

ruex は内部で immer を使用してストア状態の更新を維持するため、ミューテーションでは、新しいオブジェクトを返さずにオブジェクトのプロパティを直接変更することで状態を変更できます。例:

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

はモジュールをサポートします (名前空間はまだサポートされていません)

はミドルウェアをサポートします。注: アクションには redux-thunk に似た機能が実装されています

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue でスロット/スコープ付きスロットを使用する方法

Vue コンポーネントでのスロット ソケットの使用の詳細な説明

以上がReact で Vuex を使用するための具体的な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。