技术原理

React 学习心得_27(在React中应用Redux - 3)

文章目录[隐藏]

介绍

上一篇中大家早已将Action与如何处理Action的Reducer创建好啦,接下去将全部TodoList项目通过下列次序创建:

  1. 键入新的Todo內容并发送至Reducer以创建新的todo物品。
  2. 将现阶段state中的Todo选染到UI中。
  3. 将Footer中的挑选使用人现阶段见到的由此可见Todos的部位。

AddTodo.js

import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../Store/Action/Action';

class AddTodo extends React.Component
{
    state = {
        value:""
    }

    //====================================

    handleChange = (e) => {
        const _value = e.target.value;
        this.setState({
            value:_value
        })
    };

    //====================================

    handleSubmit = (e) => {
        const inputValue = this.state.value;
        //Step 1 : 撤销预置个人行为
        e.preventDefault()

        //Step 2 : 分辨Input是不是为空
        if(!this.state.value.trim()){
            return
        }

        //Step 3 : 推送"ADD_TODO"到Reducer增加一个新的todo物品
        this.props.dispatch(addTodo(inputValue));

        //Step 4 : 清除input內容
        this.setState({
            value:""
        });
    };

    //====================================

    render()
    {
        return(
            <div>
                <form onSubmit={ this.handleSubmit }>
                    <input 
                        value={this.state.value}
                        onChange={ this.handleChange }
                    />
                    <button type="submit">Add Todo</button>
                </form>
            </div>
        )
    }
}

export default connect(
    //运用mapStateToProps在state更改时便会开启的特点,观查Reducer是不是有增加新的state
    (state) => {console.log(state)}
)(AddTodo);

通过mapStateToProps能够 确定,的确有新的State被建立出去,而且text也是大家键入的标值
https://ithelp.ithome.com.tw/upload/images/20200516/20124767OeuXCNAAbU.png

参考文献 :
从Redux 的创作者学习培训它

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能发展开启了政府精准社会治理的时代 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录