This time I will bring you a case study of Vuex in React. What are theprecautions for using Vuex in React? The following is a practical case, let’s take a look.
I have always been a loyal fan of Redux, but after using Vuex, I lamented how quickly I got started with Vuex, so I came up with the idea of writing a Vuex-like library that can be used in React, temporarily named Ruex.How to use
1: Create a Store instance:
Same as vuex, use a single The state tree (an object) contains all application-level states (store). store can configure state, mutations, actions and modules attributes:Middleware: Middleware will be executed before and after each mutation is triggered.
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
Bind the Store instance to the component
ruex provides Provider to facilitate store instance registration to the global context. Similar to react-redux. App.js:import React from 'react' import {Provider} from 'ruex' import store from './store.js' class App extends React.Component{ render(){ return () } }
Use or modify the data on the store
After the store binding is completed, in the component You can use the data on the state and modify the state by triggering mutations or actions. For specific methods, please refer to the binding method of react-redux: using connect high-order components. 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 (
total_num: {total_num}
) } } 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)
data on the stateto the current component's on props.
Internal implementation
ruex internally uses immer to maintain store state updates, so in mutation, it can be modified directly An object's properties change state without returning a new object. For example:const state = { obj:{ name:'aaaa' } } const mutations = { changeName(state,payload){ state.obj.name = 'bbbb' // instead of // state.obj = {name:'bbbb'} }, }
Detailed explanation of the use of slot sockets in vue components
Detailed explanation of the use of slot sockets in Vue
The above is the detailed content of Vuex use cases in React. For more information, please follow other related articles on the PHP Chinese website!