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接收一個箭頭函數(shù)，如果一個函數(shù)本身是箭頭函數(shù)，則直接放名字即可。如果是調(diào)用一個箭頭函數(shù)，則可以再封裝一個箭頭函數(shù)，把調(diào)用寫在函數(shù)體里即可。

然后我們再修改Action Creator:

import { BUY_CAKE } from './cakeTypes'

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

從組件狀態(tài)中獲取數(shù)據(jù)，然后在調(diào)用Action Creator時傳入即可。

這種從組件中獲取數(shù)據(jù)，然后傳遞到reducer中使用的情景是非常多見的。

END.