案例:React+Redux使用异步Action实现加减
案例:react+redux使用异步action实现加减
其实很早就已经接触react了,当时还看的是es5语法,本来js基础就不扎实,秉着初生牛犊不怕虎的精神去看了react,结果看了云里雾里,这种硬塞的知识过几天就全忘了,过了一段时间,想着有空了,就又去看了react,这次直接看的es6语法,看完后顺道看了react-redux,刚开始,很痛苦,本来react就已经不太容易理解了,再加上redux和react-redux,更加懵逼了,一个很简单的应用还要分成action、reducer、ui、container组件,然后分别串联工作,就感觉脑袋要炸了,但是跟着阮大神写了第一个demo。
先看文件目录,我没有想demo里那样全写在一个文件里,分类可以帮助更好的理解。
1.加减计数器:先定义用户有两种操作,一种是加,一种是减,也就是action有两种。
export const increaseaction = {
type: 'increase'
}
export const decreaseaction = {
type: 'decrease'
}
注意,action的type是必须的,明文规定必须要。
2.然后是reducer,reducer是收到action,然后计算得出新的state,以便让ui组件渲染新的状态,因为每个state对应不同的view。
const setcounter = (state = {count: 0}, action) => {
switch (action.type) {
case 'increase':
return {count: state.count + 1};
case 'decrease':
return {count: state.count - 1}
default:
return state;
}
}
export default setcounter;
reducer对action的加减操作都进行了判断处理,然后返回新的state。
3.然后是ui组件,就是view部分。
import react, {proptypes} from 'react';
class counter extends react.component {
render() {
const {value, onincreaseclick,ondecreaseclick} = this.props,
btnstyle = {
width: '110px',
height: '30px',
color: '#fff',
backgroundcolor: 'green',
border: '1px solid green',
borderradius: '5px',
cursor: 'pointer'
},
textstyle = {
fontsize: '20px'
};
return (
{value}
increasedecrease
) } } counter.proptypes = { value : proptypes.number.isrequired, onincreaseclick: proptypes.func.isrequired, ondecreaseclick: proptypes.func.isrequired } export default counter;
这里ui组件接收了来自父组件的props,onincreaseclick,ondecreaseclick是两个按钮事件,用户点击触发事件然后传递action,到container接收action。
4.container接收action,通过dispatch将action传递给store。
import {connect} from 'react-redux';
import counter from '../components/counter';
import {increaseaction, decreaseaction} from '../action/index';
const mapstatetoprops = (state) => ({
value: state.count
})
const mapdispatchtoprops = (dispatch) => ({
onincreaseclick: () => dispatch(increaseaction),
ondecreaseclick: () => dispatch(decreaseaction)
})
const app = connect(
mapstatetoprops,
mapdispatchtoprops
)(counter)
export default app;
这里调用了react-redux的connect方法,用于将ui组件生成容器组件,其实就是将两者connect连接在一起,connect需要接受两个参数,mapstatetoprops和mapdispatchtoprops。
mapstatetoprops方法是讲state转成props传给ui组件,mapdispatchtoprops是ui组件参数到store.dispatch的映射,就是接收ui组件传入的action,最后的counter就是ui组件。
5.最后是store的生成场所。
import react from 'react';
import reactdom from 'react-dom';
import {provider} from 'react-redux'
import {createstore} from 'redux';
import reducer from './reducer/index';
import app from './container/app';
const store = createstore(reducer);
reactdom.render(
,
document.getelementbyid('app')
);
这边createstore(reducer)将reducer传入,这样在action通过dispatch传入store的时候会通过reducer处理action,从而生成相应的新的state,再让ui组件重新渲染。
以上就是我第一个小demo,记录我学习的脚步,有问题欢迎dalao们指出,请多关照
上一篇: java小程序发送模板消息案例
下一篇: 怎么用JS写的一个简易的计时器?