大家好,我是梅巴哥er
。前面写了关于redux的学习笔记。本篇介绍redux的异步action的使用案例。
老规矩,先上视图渲染效果看下:
案例: 在输入框中输入内容,2秒后在上方显示出来。
说明: 这里的输入事件和显示事件,明显是先后进行的,而不是同步进行的。所以这里要用到异步的action事件。
先来看下,用React如何实现:
// 入口文件 index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App1 from './components/App1'
ReactDOM.render(
<App1 />,
document.getElementById('root')
)
// UI组件 components/App1.js
import React, { Component } from 'react'
export default class App1 extends Component {
constructor(props) {
super(props)
this.state = {
val: ''
}
}
handleChange = (e) => {
console.log(e.target.value)
let targetValue = e.target.value
// 注意,这里要设置个变量,接收输入的值
// 因为e不能在异步函数中使用
setTimeout(
() => this.setState({
val: targetValue
}), 2000
)
}
render() {
return (
<div>
<h3>{this.state.val}</h3>
<input type='text'
onChange={this.handleChange} />
</div>
)
}
}
2 再来看下用Redux怎么实现
// 入口文件index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App2 from './containers/App2'
import {Provider} from 'react-redux'
import store from './redux/store'
ReactDOM.render(
<Provider store={store}>
<App2 />
</Provider>,
document.getElementById('root')
)
// UI组件 components/App1.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class App1 extends Component {
static propTyps = {
val: PropTypes.string.isRequired,
changeNumberAsync: PropTypes.func.isRequired
}
handleChange = (e) => {
console.log(e.target.value)
let targetValue = e.target.value
// 注意,这里要设置个变量,接收输入的值
// 因为e不能在异步函数中使用
this.props.changeNumberAsync(targetValue)
}
render() {
let {val} = this.props
return (
<div>
<h3>{val}</h3>
<input type='text'
onChange={this.handleChange} />
</div>
)
}
}
// 容器组件containers/App2.js
import {connect} from 'react-redux'
import App1 from '../components/App1'
import {changeNumberAsync} from '../redux/actions'
export default connect(
state => ({val: state}),
{changeNumberAsync}
)(App1)
// 下面代码是redux文件夹里的
// action-types.js
export const CHANGENUMBER = 'changeNumber'
// actions.js
import {CHANGENUMBER} from './action-types'
// 输入事件的同步action,返回的是一个对象
export const changeNumber = (targetValue) => ({
type: CHANGENUMBER,
data: targetValue
})
// 输入事件的异步action,返回的是一个函数
export const changeNumberAsync = (targetValue) => {
return dispatch => {
// 这里面写异步代码
setTimeout(
() => {
// 输入的2秒后分发同步action,执行数字显示
dispatch(changeNumber(targetValue))
}, 2000
)
}
}
// reducers.js
import {CHANGENUMBER} from './action-types'
export function isNumber(state='', action) {
switch(action.type) {
case CHANGENUMBER:
return action.data
default:
return state
}
}
// store.js
import {createStore, applyMiddleware} from 'redux'
import {isNumber} from './reducers'
import thunk from 'redux-thunk'
const store = createStore(
isNumber,
applyMiddleware(thunk) // 应用异步中间件
)
export default store