redux的学习笔记
首先先了解下什么是MVC框架
MVC框架(Model-View-Controller)
- 视图(View):用户界面。 => 传送指令到 Controller
- 控制器(Controller):业务逻辑 => 完成业务逻辑后,要求 Model 改变状态
- 模型(Model):数据保存 => 将新的数据发送到 View,用户得到反馈
来个小故事帮助理解
故事的主人公小明,辛苦打拼多年,终于存到了买房的钱,于是就屁颠屁颠的在首都的郊区买了一套120的毛坯房(当前的房子的
state
),因为是毛坯房,自然是出了一些基础设施其他啥也没有(initState
),这问题就来了,这毛坯房也不能住啊 ,这刚买完房也没多少积蓄了,就想着找装修公司简装下,问了价格之后,小明直接就凭着当年在幼儿园打下的美术基础画了一张设计图,然后就和自己老婆分配了任务,谁该做什么,例如小明粉刷墙,经过多天努力,总算是装修完成了,此时小明的新房,从一个毛坯房,变成了一个豪华的毛坯房(更新之后的房子的state
)
1.首先回顾下这个故事: 小名的毛坯房 --> 画出装修图纸 --> 小明分配任务 --> 小明和自己老婆装修 --> 豪华毛坯房
2.再来说下Redux里的几个核心概念,这里我们把React也加进来:
- view(React)
- store(state)
- action
- reducer
3.接下来看看Redux/React与这个故事的联系:
- view(React) = 第一次看到毛坯房
- store(state) = 毛坯房空空如也,什么都没有,只有基础设施
- action = 小明分配任务(谁应该干什么)
- reducer = 具体任务都干些什么(小明粉刷墙)
4.所以这个过程应该是这样的view ---> action ---> reducer ---> store(state) ---> view
5.如果放入一个web app中,首先store(state)决定了view,然后用户与view的交互会产生action,这些action会触发reducer因而改变state,然后state的改变又造成了view的变化。
redux 源码简单分析
redux中主要方法:
- createStore
- combineReducers
- bindActionCreators
- applyMiddleWare
- compose
这里主要分析一下createStore(reducer)
原函数有三个参数,这里只分析第一个参数reducer
参数:reducer
reducer
: function类型(而且是纯函数),reducer的作用是,根据指定的action的type,进行处理state,返回新的state参数:
action
: 是一个对象或者函数(最终返回的也是对象),type
是action必须有的属性,reducer根据action.type处理statestate
: 需要在这里初始化state,不然会报错- 因为reducer合并状态是覆盖式,所以需要先解构出当前状态,再进行处理
store的返回值:返回值是三个方法
dispatch
: 分发action,只能用dispatch修改store中的状态
- 根据action查询reducer中变state的方法,更新store tree
- 变更
store tree
后,依次执行listener
中所有响应函数getState
: 获取仓库中当前状态subscribe
: 注册监听函数,监听state的变化- store 可以理解为一个全局变量,保存着你项目中所有需要保存的数据,而这个全局变量加了一把密码锁,只有指定的密码
(dispatch({type:AAA}))
进行修改,因为你想啊,若是谁都能修改这个全局变量,而在你用这个变量之前,可能执行的其他程序已经对这个变量进行了修改,这也是我们平时开发的时候避免全局变量的原因,所以就要提高修该数据的权限。
let createStore = (reducer)=>{
var state;
let listeners = [];
//创建数组,保存监听函数
let getState = ()=>state;
// 获取仓库中当前状态
function dispatch(action){
// 只有调用dispatch方法才能更新仓库
state = reducer(state,action);
// 合并状态
listeners.forEach(listener=>listener());
//执行监听函数,更新view
}
let subscribe = (listener)=>{
listeners.push(listener);
// 添加监听函数
}
dispatch({})
// 由于每次dispatch执行后,redux都会执行reducer
//所以这一行的作用就是在初始化store tree中所有的state节点。
return {
getState,
dispatch,
subscribe
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。