003_redux-actions的使用

一、效果图

二、组件间的关系说明

三、源代码

3.1 CountReducer

import { createActions, handleActions, combineActions } from 'redux-actions'
import { INCREMENT, DECREMENT } from '../../utils/constant'

export const { increment, decrement } = createActions({
    [INCREMENT]: (amount = 1) => amount,
    [DECREMENT]: (amount = 1) => -amount
})

//异步调用不要用createAction创建
export const asyncIncrement = (amount=1,timeout)=>{
        //此时使用的redux-thunk实现的异步调用，由redux-thunk调用时会传入dispatch
    return  (dispatch) => {
        setTimeout(() => {
            dispatch(increment(amount))
        }, timeout)
    }
}


const defaultState = 0;
export const countReducer = handleActions({
    [combineActions(increment, decrement)]: (
        state,
        { payload:  amount  }
    ) => {
        return state + amount 
    }
}, defaultState)

3.2 PersonReducer

import { createAction, handleAction } from 'redux-actions'
import { ADD_PERSON } from "../../utils/constant"

export const addPerson = createAction(ADD_PERSON)

const defaultState = []
export const personReducer = handleAction(
    addPerson,
    //传入的数据都是由{payload:xxx}来接收的，所以需要使用payload进行解构
    (state, { payload: person }) => {
        return  [...state, person] 
    },
    defaultState)

3.3 store.js

import { createStore, applyMiddleware, combineReducers,compose } from 'redux'
import thunk from 'redux-thunk'
import { countReducer } from './count'
import { personReducer } from './person'

//添加Redux调试工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore(combineReducers({
    count: countReducer,
    persons: personReducer
}), composeEnhancers(applyMiddleware(thunk)))

3.4 Count组件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement, asyncIncrement } from '../../redux/count'

class Count extends Component {

    state = { number: 1 }

    handleIncrement = () => {
        const { number } = this.state
        this.props.increment(+number)
    }

    handleDecrement = () => {
        const { number } = this.state
        this.props.decrement(+number)
    }

    handleOddIncrement = () => {
        const { counter } = this.props
        const { number } = this.state
        if (counter % 2 === 0) {
            alert('数据不符合')
            return
        }
        this.props.increment(+number)
    }

    handleAsyncIncrement = () => {
        const { number } = this.state
        this.props.asyncIncrement(+number, 500)
    }

    handleSelect = (event) => {
        this.setState({ number: event.target.value })
    }

    render() {
        const { counter,personLength } = this.props
        return (
            <>
                <h2>{counter},数组添加了几个人：{personLength}</h2>
                <select
                    onChange={this.handleSelect}
                >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.handleIncrement}>+</button>
                <button onClick={this.handleDecrement}>-</button>
                <button onClick={this.handleOddIncrement}>奇数相加</button>
                <button onClick={this.handleAsyncIncrement}>异步相加</button>
            </>
        )
    }
}

export default connect(
    state => ({
        counter: state.count,
        personLength: state.persons.length
    }),
    {
        increment,
        decrement,
        asyncIncrement
    })(Count)

3.5 Person组件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/person'


class Person extends Component {

    state = { person: {} }

    handAddPerson = ()=>{
        const name = this.nameNode.value
        const {addPerson} = this.props
        addPerson({name})
        this.nameNode.value=""
    }

    render() {
        const { counter,persons } = this.props
        return (
            <div>
                <h2>当前count的值是：：{counter}</h2>
                <input type="text" ref={c=>this.nameNode = c}/>
                <button onClick={this.handAddPerson}>添加</button>
                <ul>
                    {
                        persons.map(({name},index)=><li key={index}>{index}==={name}</li>)
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({
        counter: state.count,
        persons: state.persons
    }), 
    {
        addPerson
    }
)(Person)

源代码