react 使用 ruex管理状态

一、安装 ruex    

npm install ruex

使用：

import React, { Component } from 'react';
  import { Button,Input} from 'antd';
  import {connect} from 'ruex';
   class App extends Component {
    constructor(props){
      super(props)
      this.state={}
    }
    
     render() {
       const {total_num,isshow,numbers} = this.props
       return (
         <div className="App">
           <Button type="primary" onClick={this.props.add.bind(this,5)}>增加++</Button>
           <Button type="primary" onClick={this.props.cut.bind(this)}>减少--</Button><br/>
           <Button type="primary" onClick={this.props.addliat.bind(this)}>增加++</Button>
           <Button type="primary" onClick={this.props.cutAsync.bind(this)}>减少--</Button>
         </div>
       );
     }
   }
   const mapStateToProps = (state)=>({//传入需要更改状态的值
        total_num:state.total_num,
        isshow:state.isshow,
        numbers:state.numbers
   })

   const mapMutationsToProps = ['add','cut'];//直接通过更改mutations改变数据

   const mapActionsToProps = ['addliat','cutAsync','addPromise','isshowsAsync','change_num'];//通过action操作mutations，从而更改数据状态

   export default connect(
     mapStateToProps,
     mapMutationsToProps,
     mapActionsToProps
   )(App);

在src下创建文件夹store(名字任意起)  创建 actions.js   store.js mutations.js   types.js

在types.js中

export const ADD_NUM = 'ADD_NUM' //增加
export const CUT_NUM = 'CUT_NUM' //减少

在 mutations.js中

import * as types from './types'

export const mutations={
[types.ADD_NUM](state,payload){
     state.total_num +=payload
}
[types.CUT_NUM](state,payload){
 state.total_num -=payload
}
}

在actions.js中

import * as types from './types'

export const actions = {
addliat({state,commit,rootState,dispatch},payload){
commit(types.ADD_NUM,payload)
},
cutAsync({state,commit,rootState,dispatch},payload){

commit(types.CUT_NUM,payload)
}

}

在store.js中

import {createStore} from 'ruex'
import {mutations} from './mutations'
import {actions} from './actions'

const state={
total_num:50
} 
//中间件打印
cosnt logger = (state)=>(next)=>(mutations,payload)=>{
console.group('改变mutations之前',store.getState())
next(mutations,payload)
console.group('改变mutations之后',store.getState())
}

const store =createState({
    state,mutations,actions
},[logger])
export default store

最后在主页使用index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'ruex';  //1
import store from './store/store'//2
import App from './App';//3
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render( <Provider store={store}>//4
                    <App />
                 </Provider>, 
                document.getElementById('root'));
registerServiceWorker();