最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

React入门-9.redux你好

XAMPP下载 admin 572浏览 0评论
 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结束 */

转载请注明:XAMPP中文组官网 » React入门-9.redux你好

您必须 登录 才能发表评论!