React学习(7)——组件状态管理框架Redux

 学习 React  原创  管理员  2017-09-06 11:10

概要:我们把Flux看作一个框架理念的话,那么Redux就是Flux的一种实现,除了Redux之外,还有很多实现Flux的框架。毫无疑问Redux获得的关注更多,这不是偶然的,因为Redux有很多其它框架无法比拟的优势。

三个基本原则:

1:唯一的数据源

应用的状态数据(State)应用只存储在唯一的一个Store上。整个应用只保持一个Store,所有组件的数据源就是这个Store上的状态。

这个唯一Store上的状态,是一个树形的对象,每个组件往往只是用树形对象上的一部分数据。

2:保持状态只读

不能去直接修改状态,如果要修改Store的状态,必须要派发一个action动作对象来完成。

3:数据的改变只能通过纯函数来实现

reducer(state,action),state为当前状态,action为接收到的action对象,而reducer要做的事情,就是根据state和action的值返回一个新的state对象。该函数是一个纯函数,无副作用(里面不会对传过来的参数进行增删改,或间接修改外部数据),当然也就不能直接修改state和action对象。

Store

简单来讲,就是一个装满组件数据源(State)的容器,如果把State看成是数据库表中的一条记录的话,那么Store就相当于整个数据库,因为里面存着各种各样的数据信息,这些数据信息会被用作某个组件的数据源。

方法:

getState()

获取整个State

dispatch(action)

触发action,并改变State对象

subscribe(listener)

监听变化

Action

一个包含"type"属性的普通对象。它代表着用户的行为动作,如:增、删、改、查等动作。

{
	type: "Add_User",
	model: {
		name:"XCL",
		age:20
	}
}
 Action Creator

就是一个普通函数,返回一个Action对象。


let addUser=()=>(userModel){
	return {
				type: "Add_User",
				model: {
					name:userModel.name,
					age:userModel.age
				}
			}

}

如何去更新State:

let action=addUser({name:"XCL",age:20});
store.dispatch(action);
Reducer

用户每次dispatch(action)之后,就会触发reducer的执行。该函数必须是一个纯函数,不要有任何的副作用产生。

这里面基本上装着业务逻辑了,因为旧的state传入后,会返回一个新的state,而state的更新,也就意味着界面的变化。

let reducer=(state,action)=>{
	switch(action.type){
		case "Add_User":
				let newState=Object.assign({},state);
				newState.userList.push(action.model);
				return newState;
		default:
				return state;
	}
};

完整示例:

 

深入浅出React和Redux  

编辑:myweb   最后更新于:2017-09-04 22:46


版权声明:本站所有原创内容受到法律的严格保护,版权归本站所有。如果您觉得我们的内容有价值,您仍然可以进行自由传播,但必须显著地标识或说明此内容在本站的链接地址。




联系我:help@wodeabc.com鄂ICP备14016278号-2
©2016-2021 我的ABC All Rights Reserved.
友情链接: 一起编程网
点击这里给我发消息
我的ABC交流群