Redux实现一个小todoList

今天刚刚学习了redux，趁热赶紧记录一下，话不多说上代码
最后效果图

1:安装redux

cnpm  install redux --save

2:安装antd，为了样式好看一点点

cnpm  install antd --save

3：新建一个Todo.js存放页面

import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
	render(){
		return(
			<div>
				<div>
					<Input placeholder={this.state.inputValue} style={{'width':250}}
					 onChange={this.changeInputValue} value={this.state.inputValue}
					 />
					<Button type="primary"  onClick={this.addTodo} >增加</Button>
				</div>
				<div>
					<List
					      bordered
					      dataSource={this.state.list}
					      renderItem={(item,index) => (
					        <List.Item onClick={this.deleteItem.bind(this,index)}>
					          {item}
					        </List.Item>
					      )}
					    />
				</div>
			</div>
		)
	}

ps:这里用input来实现具体的功能
4：开始新建一个store文件夹，再新建index.js，图书库

//建立一个仓库
import {createStore} from 'redux';
//引入reducer管理员
import reducer from './reducer.js';
const  store  = createStore(
	reducer,
	window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

这里安装了一个google的redux调试工具，安装步骤很简单，就是去下载一个扩展程序，搜索redux devtools 就可以了

安装好点开浏览器里面会加一行配置就可以使用了····
5:再次新建一个reducer.js，类似图书管理员

const defaultState={
	inputValue:"我是默认值",
	list:['好好学习react','每天听歌跑跑步','和儿子康康乐乐一起玩耍']
	
};
export default (state=defaultState,action)=>{
	//state是以前的默认值,action是我们输入的新值 
	console.log(state,action);
	//reducer只能接受state,不能改变state
	if(action.type==='changeInput'){
		//深度拷贝
		let  newState = JSON.parse(JSON.stringify(state));
		newState.inputValue = action.value;
		return newState;
	};
	if(action.type==='addItem'){
		let  newState = JSON.parse(JSON.stringify(state));
		newState.list.push(newState.inputValue);
		newState.inputValue='';
		return newState;
	};
	
	if(action.type==='deleteItem'){
		let  newState = JSON.parse(JSON.stringify(state));
		newState.list.splice(action.index,1);
		return newState;
	};
	return state;
}

ps:这里可以定义一个默认的参数defaultState，然后提交改变后，判断type值，改变state后，返回新值newState,他会自动返回store中
6:在Todo.js中的构造器中就可以获取store.getState();

constructor(props) {
	    super(props);
		//获取仓库的默认state参数
		console.log(store.getState());
		//设置放入state
		this.state= store.getState();
		//发布订阅   新版本不需要  但是如果input加上了value 就必须要 否则可以不需要
		store.subscribe(this.storeChange)
	};

效果图

7：获取值后放入state中就可以了。

                //设置放入state
		this.state= store.getState();

8:来实现input改变后的实践吧

	changeInputValue=(e)=>{
		let value = e.target.value;
		const action={
			type:'changeInput',
			value
		};
		store.dispatch(action);
	};

可以看到分发了一个action，给这个action取名为changeInput,是为了后面的判断具体使用

9：当store仓库值改变的时候，我们要记得回setState填一下，这样才可以填加数据到state里面

	storeChange=()=>{
		this.setState(store.getState());
	};

10:这个时候基本就可以了，随着input的值改变，都会记录新值和旧值，但是如果input加上value就不行了，就会报错，那么就需要继续监听

 //发布订阅   新版本不需要  但是如果input加上了value 就必须要 否则可以不需要
		store.subscribe(this.storeChange)

11:好了这个时候就入门了，来做添加和删除吧~~~~
添加事件

	addTodo=()=>{
		let  action={type:'addItem'};
		store.dispatch(action);
	};

所有提交都是定义一个对象，取名type，名字随便‘addItem’，然后分发出去
12：reducer中监听，然后克隆一个新对象，再push进去我们添加的内容，清空输入框，返回这个对象，就大功告成啦

	if(action.type==='addItem'){
		let  newState = JSON.parse(JSON.stringify(state));
		newState.list.push(newState.inputValue);
		newState.inputValue='';
		return newState;
	};

13：删除同理

	deleteItem(index){
		const  action={index,type:'deleteItem'};
		store.dispatch(action);
	};

传递一个index过去，方便删除
14:reducer.js接受判断

	if(action.type==='deleteItem'){
		let  newState = JSON.parse(JSON.stringify(state));
		newState.list.splice(action.index,1);
		return newState;
	};

完成OK，最后一步吧action的type提取出去，方便报错找出来了
A:新建一个actionType.js

export const CHANGEINPUT= 'changeInput';

export const  ADDITEM= 'addItem';

export const DELETEITEM = 'deleteItem';

B:修改引入

import {CHANGEINPUT,ADDITEM,DELETEITEM} from './store/actionTypes.js';

一定要注意路径哦！！！！！！

完成OK·····················