当前位置: 首页 > 工具软件 > rematch > 使用案例 >

rematch简单使用

鲁俊友
2023-12-01

import {init,dispatch} from 'rematch/core';

 

const count = {

state:{

number:0

},

reducers:{//一个改变该model state的所有函数的对象

increments:(state,payload) => state.number + payload,

decrements:(state,payload) => state.number - payload,

},

effects:{//方法都写在这里

async asyncIncrements(payload){//异步增加

await this.increments(payload);

},

async asyncDecrements(payload){

await this.decrements(payload);

}

 

}

}

 

const store = init({

models:{count},

redux:{}

})

 

dispatch.count.asyncIncrements(10);//异步增加10

dispatch.count.asyncDecrements(10);//异步减少10



 

使用:

import React from 'react'

import {connect} from 'react-redux'

 

class App extends Component{

addCount = (value)=>{//异步增加数据

const { CountDispatch } = this.props;

CountDispatch.asyncIncrements(value);

}

 

cutCount = (value) =>{//异步减少数据

const {CountDispatch} = this.props;

CountDispatch.asyncIncrements(value);

}

 

render(){

let {CountNumbers} = this.props;

return (

<div>

<p>获取count数据中的number变化:{CountNumbers.number}</p>

<input type="button" value="增加数据" onClick={this.addCount(10)}/>

<input type="button" value="减少数据" onClick={this.cutCount(10)}/>

</div>

)

}

}

const mapStateToProps =(state)=>{

CountNumbers:state.count,//获取count数据

}

const mapDispatchToProps=(dispatch)=>{

CountDispatch:dispatch.count,//获取count方法

}

 

export default connect(mapStateToProps,mapDispatchToProps)(App)

 类似资料: