react用redux 做的todolist

### 1. 创建项目 

create - react - app  项目名（shop）

### 2. 进入项目，下载redux 

cnpm install redux  --save 

### 3. 在src中创建几个文件夹

App ----->App.css       App.js    

store------>store.js  

todo----->to.js  

reducer------>reducer.js  

list ---->list.js   

### 4. 在todo.js中 

import React, {Component} from 'react';
import store from "../store/store";
class Todo extends Component {
    constructor(props) {
        super(props);

         this.state={
             tt:""//--->初始化一个状态 
         }
    }
    ch(e){//--->input,onChange事件
        this.setState({tt:e.target.value});
    }
    add(){//--->添加事件
        store.dispatch({type:"add",d:{t:this.state.tt}});//--->将数据派发到reducer.js页面中操作
      this.setState({tt:""})//--->当前的input框中的数据值为空
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.tt} onChange={this.ch.bind(this)}/>
                <input type="button" onClick={this.add.bind(this)} value="添加"/>
            </div>
        );
    }
}

export default Todo;

### 5. 在list.js 中

import React, {Component} from 'react';
import store from "../store/store"
class List extends Component {
    constructor(props) {
        super(props);
        var s1=store.getState();//--->获取仓库数据
        this.gets=this.gets.bind(this);//--->改变this指向 
        store.subscribe(this.gets);//--->设置监听，再次更新数据
       this.state={
           list:s1.arr
       }
    }
    gets(){
        var s=store.getState();//--->获取仓库数据 
        this.setState({list:s.arr});//--->更新当前数据 
    }

    del(n){//--->删除事件 --->派发到reducer.js中进行操作
        store.dispatch({type:"del",data:{i:n}})
    }
    ck(n){//--->多选框事件 
        store.dispatch({type:"ck",data:{i:n}});
    }
    finished(){//--->数量事件  
       var list=this.state.list;
       var s=0;
       list.forEach((v,i)=>{
           if(v.done){//--->如果多选框被选中了，执行s++,否则不会执行
               s++;
           }
       })
        return s;
    }
    qh(n){//--->点击添加的文本，input显示，该文本隐藏  
        store.dispatch({type:"qh",data:{i:n}});
    }
    ob(n){//--->点击input框，文本显示，该input框隐藏 
        store.dispatch({type:"ob",data:{i:n}});
    }
    chh(n,e){//--->在input框中修改文本数据  
        store.dispatch({type:"chh",data:{i:n,c:e}});
    }
    render() {
        return (
            <div>
                <h2>已完成{this.state.list.length-this.finished()}</h2>
                <ul>
                    {
                        this.state.list.map((v,i)=>{
                           if(!v.done){
                               return <li key={i}>
                                   <input type="checkbox" defaultChecked={v.done}
                                          onClick={this.ck.bind(this,i)}/>
                                   <span style={{display:v.show?"inline-block":"none"}}
                                   onClick={this.qh.bind(this,i)}>{v.title}</span>
                                   <input type="text" style={{display:!v.show?"inline-block":"none"}}
                                   onBlur={this.ob.bind(this,i)} value={v.title}
                                   onChange={this.chh.bind(this,i)}/>
                                   <input type="button" value="删除" onClick={this.del.bind(this,i)}/>
                               </li>
                           }
                        })
                    }
                </ul>
                <h2>未完成{this.finished()}</h2>
                <ul>
                    {
                        this.state.list.map((v,i)=>{
                            if(v.done){
                                return <li key={i}>
                                    <input type="checkbox" defaultChecked={v.done}
                                           onClick={this.ck.bind(this,i)}/>
                                    {v.title}
                                    <input type="button" value="删除" onClick={this.del.bind(this,i)}/>
                                </li>
                            }
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default List;

### 6. 在reducer.js中 

也可在该页面中加入本地储存

var s={//--->定义一个初始值 
    t:"",
    arr:[]
}
function reducer(start=s,action){
    switch (action.type) {
        case "add"://--->添加事件   
            var s1=JSON.parse(JSON.stringify(start));//--->深度复制
            var item={
                title:action.d.t,
                done:false,
                show:true
            }
            s1.arr.push(item);
            return s1;

        case "del"://--->删除事件  
            var s1=JSON.parse(JSON.stringify(start));//--->深度复制
            s1.arr.splice(action.data.i,1);
            return s1;

        case "ck"://--->多选框事件  
            var s1=JSON.parse(JSON.stringify(start));//--->深度复制
            s1.arr[action.data.i].done=!s1.arr[action.data.i].done;
            return s1;


        case "qh"://--->点击添加的文本隐藏事件，input框显示
            var s1=JSON.parse(JSON.stringify(start));//--->深度复制
            s1.arr[action.data.i].show=!s1.arr[action.data.i].show;
            return s1;

        case "ob"://--->点击input框隐藏事件，文本显示
            var s1=JSON.parse(JSON.stringify(start));//--->深度复制
            s1.arr[action.data.i].show=!s1.arr[action.data.i].show;
            return s1;

        case "chh"://--->在input框中修改文本事件
            var s1=JSON.parse(JSON.stringify(start));//--->深度复制
            s1.arr[action.data.i].title=action.data.c.target.value;
            return s1;

        default:
            return start;
    }
}
export default reducer;

### 7. 在store.js中  

import {createStore} from "redux";//--->引入redux模块
import reducer from "./reducer/reducer";//--->引入reducer.js文件
var store=createStore(reducer);//--->创建仓库  
export default store;//--->导出


###欢迎大家评论， 如有不足请指正， 可以一起交流，学习，一起进步   ！！！！

原文地址：https://www.cnblogs.com/zhangMr/p/11845104.html