Redux: Combine UI and Redux

最新推荐文章于 2024-08-29 09:16:02 发布

原创最新推荐文章于 2024-08-29 09:16:02 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何在React组件AddPerson中使用LocalUIstate获取用户输入信息，并将其通过Redux的action传递到store中，实现状态管理和数据更新。具体展示了在按钮点击事件中，将name和age参数传入reducer，完成数据的存储过程。

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})
    }
};