Redux学习之旅十四：React-Redux代码优化

TodoList组件中没有任何的业务逻辑，只有一个render，所以可以改写为无状态组件：

import React from 'react';
import { connect } from 'react-redux';


const TodoList = (props) => {
    //js结构赋值
    let { inputValue, inputChange, clickBtn, list, deleteItem } = props;
    return (
        <div>
            <div>
                <input
                    value={inputValue}
                    onChange={inputChange}
                />
                <button
                    onClick={clickBtn}
                >
                    提交
                </button>
            </div>
            <ul>
                {
                    list.map((item, index) => {
                        return (
                            <li
                                key={index + item}
                                onClick={() => {
                                    deleteItem(index);
                                }}
                            >
                                {item}
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    );
}


//state影射为props
const stateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}
//dispatch影射为props
const dispatchToProps = (dispatch) => {
    return {
        inputChange(e) {
            let action = {
                type: 'change_input',
                value: e.target.value
            }
            dispatch(action);
        },
        clickBtn() {
            let action = {
                type: 'add_item'
            }
            dispatch(action);
        },
        deleteItem(index) {
            // console.log(index);
            let action = {
                type: 'delete_item',
                index: index
            }
            dispatch(action);
        }
    }
}

export default connect(stateToProps, dispatchToProps)(TodoList);