React에서 Vuex 메소드를 사용하는 방법에 대한 자세한 설명

이번에는 React에서 Vuex를 사용하는 방법에 대해 자세히 설명하겠습니다. React에서 Vuex를 사용할 때 주의사항은 무엇인가요?

저는 원래 Redux의 열렬한 팬이었지만 Vuex를 사용하고 나서 너무 빨리 Vuex를 시작하게 된 것이 아쉬웠고, 그래서 React에서 사용할 수 있는 Vuex 같은 라이브러리를 작성하자는 생각이 떠올랐고, 임시 이름은 Ruex입니다.

사용 방법

1: Store 인스턴스 만들기:

vuex와 마찬가지로 단일 상태 트리(하나의 개체)를 사용하여 모든 애플리케이션 수준 상태(저장소)를 포함합니다.

store는 상태, 변형, 작업 및 모듈 속성을 구성할 수 있습니다.

1. state: 데이터 저장

2. mutations: 상태를 변경하는 유일한 방법은 변형을 제출하는 것입니다.

3. actions: 작업은 Change가 아닌 변형을 제출합니다. 상태를 직접 확인하세요. 작업은 모든 비동기 작업을 포함하고 변형을 트리거하며 다른 작업을 트리거할 수 있습니다.

middleware 지원: 미들웨어는 각 변형이 트리거되기 전후에 실행됩니다.

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는 전역 컨텍스트에 스토어 인스턴스 등록을 용이하게 하는 Provider를 제공합니다. 반응-리덕스(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>
 )
 }
}

스토어의 데이터 사용 또는 수정

스토어 바인딩이 완료된 후 상태에 있는 데이터를 컴포넌트에서 사용할 수 있으며, 변이를 트리거하여 상태를 수정할 수 있습니다. 또는 행동. 구체적인 방법은 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: 돌연변이를 props에 바인딩합니다. 예를 들어 호출 시 this.props.add(data)에 의해 변이가 트리거될 수 있으며 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

vue 내장 지침 지침

FileReader가 파일 리더를 구현하는 방법

위 내용은 React에서 Vuex 메소드를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!