Redux入门案例todo

redux入门案例写在一个页面中实现，增加数据与删除数据(官方版的简写)[忽视项目中的命名]

'use strict';
import React,{Component} from 'react';
import {createStore} from "redux";

function add(text) {
    return{
        type:"ADD",
        value:text,
    }
}
function reduce(arg) {
    return{
        type:"DE",
        value:arg,
    }
}
function todo(state=[],action){
    switch (action.type){
        case "ADD":
            return [...state,action.value];
        case "DE":
            return state.filter((item,index)=>{
                return item != action.value;
            })
        default:
            return state
    }
}

//创建store
let store = createStore(todo);

export default class Todo extends Component{
    constructor(props){
        super(props);
        this.state = {
            data:[]
        }
        this.add1 = this.add1.bind(this);
    }
    add1(){
        let dom = this.refs.input
        store.dispatch(add(dom.value))
        dom.value = "";
    }
    delete(arg){
        store.dispatch(reduce(arg))
    }
    componentWillMount(){
        store.subscribe(()=>{
            this.setState({
                data:store.getState()
            })
        })
    }
    render(){
        return(
            <div>
                <p>
                    <input type="text" ref="input"/>
                    <input type="button" value="新增" onClick={this.add1}/>
                </p>
                <ul>
                    {
                        this.state.data.map((item,index)=>(
                            <li key={`list-${index}`}>
                                <span>{item}</span>
                                -------------
                                <a href="javascript:;" onClick={this.delete.bind(this,item)}>x</a>
                            </li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}