代码拉取完成,页面将自动刷新
本文以一个加减数为例,效果图如下
在src/js
文件夹下新建一个新的文件夹demo1,并且在demo1中新建一个Demo.jsx.
打开routes.jsx
文件,引入刚新建的Demo.jsx.
import Demo from '../demo1/Demo'
并且配置Route,引入路径。
<Route path="/demo" component={Demo}/>
在demo1的文件夹下,新建一个num.model.js 用来处理数据,也就是做redux的工作。
const num = {
name: 'num',
initialState: {
num:0
},
sagas:{
*add(action, {update, put, call}) {
yield update({num:action.payload.num})
},
}
}
页面的值是从num.model.js中拿的。若有数据有改动,则会从页面发送请求,redux更新数据之后,再重新发送数据到页面。
@connect(
state => {
return {
num: state.num || 0
}
}
)
export default class Demo extends Component {
......
}
在页面可以直接发送请求,在页面把type写好,并且将要传的值放在payload即可。 type要写明sagas的名字以及相应的函数名。
export default class Demo extends Component {
render() {
return(
<button onClick={this.add}>+</button>
)
}
add = () => {
var num = this.props.num.num
num ++
this.props.dispatch({
type:"num/add",
payload: {
num:num
}
})
}
}
值得注意的是:这里的函数名必须和num.model.js的函数名一致。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。