React： Redux案例四

大家好，我是梅巴哥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