React:Redux实战案例分析（第三篇）

大家好&＃xff0c;我是梅巴哥er。本篇介绍redux第三个小案例&＃xff0c;每2秒自动点击按钮触发变色。这个案例有个需要特别注意的地方是&＃xff0c;这是否需要用到异步action&＃xff1f; 在什么情况下会用到异步action&＃xff1f;

所谓异步&＃xff0c;就是上一个事件和下一个事件不是同步进行的。
在该案例中&＃xff0c;上一个事件是点击&＃xff0c;下一个事件是触发变色。这两个事件是同步的&＃xff0c;即点击后马上就会变色。只不过是每两次点击之间会间隔两秒时间。所以&＃xff0c;这个案例仍然是同步action。

如果&＃xff0c;案例是点击2秒后触发变色&＃xff0c;那么点击时间和触发变色的时间就是先后进行&＃xff0c;而非同步进行&＃xff0c;这时候就是异步action了。

这个案例用了两种方法写的。方便大家更好的学习和加深认识。

老规矩&＃xff0c;先看视图渲染效果&＃xff1a;

Redux案例三

Redux红绿灯案例&＃xff1a;每2秒自动点击按钮触发变色

PS&＃xff1a;前面已经有过几个小案例了&＃xff0c;这里就直接写代码&＃xff0c;不重复赘述了。

1&＃xff0c;用React编码

// 入口文件 index.js
import React from &＃39;react&＃39;
import ReactDOM from &＃39;react-dom&＃39;
import App1 from &＃39;./components/App1&＃39;ReactDOM.render(<App1 />,document.getElementById(&＃39;root&＃39;)
)// 组件 components/App1.js
import React, { Component } from &＃39;react&＃39;export default class App1 extends Component {constructor(props) {super(props)this.state &＃61; {val: 1}}componentDidMount() {let val &＃61; this.state.val this.timerID &＃61; setInterval(() &＃61;> this.handleClick(val),2000)}componentWillUnmount() {clearInterval(this.timerID)}handleClick (val) {this.setState({val: this.state.val &＃43; 1})console.log(&＃39;setval: &＃39;, this.state.val)}render() {let val &＃61; this.state.val console.log(&＃39;val&＃61; &＃39;, val)let isColorif(val % 3 &＃61;&＃61;&＃61; 1) {isColor &＃61; &＃39;red&＃39;} else if(val % 3 &＃61;&＃61;&＃61; 2) {isColor &＃61; &＃39;yellow&＃39;} else if(val % 3 &＃61;&＃61;&＃61; 0) {isColor &＃61; &＃39;green&＃39;}return (<div style&＃61;{{width: 100, height: 100,textAlign: &＃39;center&＃39;}}><div style&＃61;{{backgroundColor: isColor, width: 100, height: 100, borderRadius: &＃39;50%&＃39;}}></div><button style&＃61;{{marginTop: 5}}onClick&＃61;{() &＃61;> this.handleClick(val)} >切换颜色</button></div>)}
}

2&＃xff0c;Redux编码&＃xff1a;2秒后自动点击触发变色

• 注意&＃xff0c;这个案例不是redux的异步action
• 因为这个是2秒后自动点击触发变色&＃xff0c;是触发变色的同步action写在点击函数里&＃xff0c;定时器里写点击函数
• 点击和变色是同步的&＃xff0c;所以不是异步action
• 如果是点击后2秒再触发变色&＃xff0c;就完全不一样了
• 这时的点击和变色是不同步的&＃xff0c;也就是异步action
• 写法就变成了 计时器写在点击函数里面&＃xff0c;然后定时器写在异步action里&＃xff0c;在定时器里分发同步action。
• 在react中的异步&＃xff0c;是在componentDidMount中完成的

入口文件index.js

import React from &＃39;react&＃39;
import ReactDOM from &＃39;react-dom&＃39;
import App2 from &＃39;./containers/App2&＃39;
import {Provider} from &＃39;react-redux&＃39;
import store from &＃39;./redux/store&＃39;ReactDOM.render(<Provider store&＃61;{store}><App2 /></Provider>,document.getElementById(&＃39;root&＃39;)
)

UI组件App1.js

import React, { Component } from &＃39;react&＃39;
import PropTypes from &＃39;prop-types&＃39;export default class App1 extends Component {static propTypes &＃61; {val: PropTypes.number.isRequired,changeNumber: PropTypes.func.isRequired}componentDidMount() {let {val} &＃61; this.props this.timerID &＃61; setInterval(() &＃61;> this.handleClick(val),2000)}componentWillUnmount() {clearInterval(this.timerID)}handleClick &＃61; (val) &＃61;> {this.props.changeNumber(val)}render() {let {val} &＃61; this.props let isColorif(val % 3 &＃61;&＃61;&＃61; 1) {isColor &＃61; &＃39;red&＃39;} else if(val % 3 &＃61;&＃61;&＃61; 2) {isColor &＃61; &＃39;yellow&＃39;} else if(val % 3 &＃61;&＃61;&＃61; 0) {isColor &＃61; &＃39;green&＃39;}return (<div style&＃61;{{width: 100, height: 100,textAlign: &＃39;center&＃39;}}><div style&＃61;{{backgroundColor: isColor, width: 100, height: 100, borderRadius: &＃39;50%&＃39;}}></div><button style&＃61;{{marginTop: 5}}onClick&＃61;{() &＃61;> this.handleClick(val)} >切换颜色</button></div>)}
}

容器组件App2.js

import {connect} from &＃39;react-redux&＃39;
import App1 from &＃39;../components/App1&＃39;
import {changeNumber} from &＃39;../redux/actions&＃39;export default connect(state &＃61;> ({val: state}),{changeNumber}
)(App1)

action事件类型 action-types

// 事件类型// 改变数字的action
export const CHANGENUMBER &＃61; &＃39;changeNumber&＃39;

事件actions.js

// 事件actions
import {CHANGENUMBER} from &＃39;./action-types&＃39;export const changeNumber &＃61; () &＃61;> ({type: CHANGENUMBER,
})

管理员reducers.js

// 管理员reducers
import {CHANGENUMBER} from &＃39;./action-types&＃39;export function isChange(state &＃61; 1, action) {switch(action.type) {case CHANGENUMBER:return state &＃43; 1default:return state }
}

仓库store.js

import {createStore} from &＃39;redux&＃39;
import {isChange} from &＃39;./reducers&＃39;const store &＃61; createStore(isChange)export default store