17-Action Payload

Time: 20200129

在前面React-Redux项目中，我们设定的Action还没包含有用的信息。

一般我们约定action为下面的格式：

{
  type: '',
  payload: ''
}

实例

我们给定一个输入框，表示要买多少蛋糕：

import React, { useState } from 'react'
import { buyCake } from '../redux'
import { connect } from 'react-redux'

function NewCakeContainer(props) {
    const [number, setNumber] = useState(1)
    return (
        <div>
            <h2>Number of Cakes {props.numOfCakes}</h2>
            <input type="text" value={number} onChange={e => setNumber(e.target.value)}></input>
            <button onClick={() => props.buyCake(number)}>Buy {number} Cake </button>
        </div>
    )
}

const mapStatetoProps = state => {
    return {
        numOfCakes: state.cake.numOfCakes
    }
}
const mapDispatchToProps = dispatch => {
    return {
        buyCake: (number) => dispatch(buyCake(number))
    }
}
export default connect(
    mapStatetoProps,
    mapDispatchToProps)
    (NewCakeContainer)

这里先注意一个小点，就是onClick接收一个箭头函数，如果一个函数本身是箭头函数，则直接放名字即可。如果是调用一个箭头函数，则可以再封装一个箭头函数，把调用写在函数体里即可。

然后我们再修改Action Creator:

import { BUY_CAKE } from './cakeTypes'

export const buyCake = (number=1) => {
    return {
        type: BUY_CAKE,
        payload: number
    }
}

从组件状态中获取数据，然后在调用Action Creator时传入即可。

这种从组件中获取数据，然后传递到reducer中使用的情景是非常多见的。

END.