React入门-9.redux你好

 Redux入门
1. 介绍
redux是js的状态管理机制，与vuex类似，不过vuex是为vue定制的。而redux并非仅仅服务于react,在jquery,angular,甚至于原生的js中都可以使用。简单来说，redux就是帮我们管理数据的。

2. 核心概念
state
状态，用于维护数据的一个对象，不能直接修改
let initialState ={
person: []
}
reducer
action调用后会执行响应的reducer，reducer会执行响应操作返回数据状态 state
const reducer = function(state=initialState,action){
switch(action.type){
case ADD_TO_PERSON :
// 在reducer中不能直接修改state, 需要做的事值需要修改person
return {
…state,
person:[…state.person,action.payload]
}
default :
return state;

}
}
const store = createStore(reducer);
action
定义动作，获取参数，进而影响reducer的执行来改变或获取state
function addToPerson(name,age){
return {
type:ADD_TO_PERSON,
payload:{
name,
age
}
}
}
// 分发动作
store.dispatch(addToPerson(‘tom’,18))
3. 完整案例
下面的代码我们通过create-react-app来创建项目，然后将下面的代码插入到index.js中执行，当然如果我们在实际开发中肯定不会这么用，需要将写在特定地方，然后进行引用。

…
/* redux开始 */
//1. state数据初始状态
let initialState ={
person: []
}
const ADD_TO_PERSON = ‘ADD_TO_PERSON’

//2. reducer,指定了应用状态的变化如何响应 actions 并发送到store的。
const reducer = function(state=initialState,action){
switch(action.type){
case ADD_TO_PERSON :
// 在reducer中不能直接修改state, 需要做的事值需要修改person
return {
…state,
person:[…state.person,action.payload]
}
default :
return state;

}
}
const store = createStore(reducer);

//3. action创建函数,添加
function addToPerson(name,age){
// action对象，action是将数据从应用传到store的有效载荷，是store数据的唯一来源，通过store.dispatch来调用
return {
type:ADD_TO_PERSON,
payload:{
name,
age
}
}
}
console.log(‘—–‘,store.getState());
//4. 调用action完成person的保存
store.dispatch(addToPerson(‘tom’,18))
console.log(‘—–‘,store.getState());

/* redux结束 */
…