Redux: Combine UI and Redux

Local UI state 与 Redux 的数据传递

在addperson中加入state，用于获取ui输入的信息，并放入localstate

import React ,{Component}from 'react';

import './AddPerson.css';

class AddPerson extends Component{
    state={
        name : '',
        age:''
    }

    nameChangeHandler=(event)=>{
        this.setState({name:event.target.value});
    }

    ageChangeHandler=(event)=>{
        this.setState({age:event.target.value});
    }

    render(){
        return(
            <div className="AddPerson">
                <input 
                    type="text" 
                    placeholder="Name" 
                    onChange={this.nameChangeHandler}
                    value={this.state.name}
                    />
                <input 
                    type="number" 
                    placeholder="Age" 
                    onChange={this.ageChangeHandler}
                    value={this.state.age}
                    />
                <button onClick={()=>this.props.personAdded(this.state.name,this.state.age)}>Add Person</button>
            </div>
        );
    };
    
};

export default AddPerson;

将localstate中获取的name和age信息在onclick事件中传入Redux中

往函数中传入两个参数——name+age

<button onClick={()=>this.props.personAdded(this.state.name,this.state.age)}>Add Person</button>

在设定该函数的js中，将两个参数传入reducer的action中

const mapDispatchToProps=dispatch=>{
    return{
        Addperson:(name,age)=>dispatch({type:actionType.AddPerson,name:name,age:age}),
        Deleteperson:(id)=>dispatch({type:actionType.DeletePerson,id:id})
    }
};