简介

上一篇中我们已经将Action与如何处理Action的Reducer建立好了，接下来将整个TodoList专案透过以下顺序建立:

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也是我们输入的数值

参考资料 :
从Redux 的作者学习它