今天刚刚学习了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·····················
