目录
阅读本文的前提条件,了解 Redux基本概念。
杂谈:
了解一个框架,首先得明白, 框架解决的痛点是什么。
前端需要对状态进行管理(同步状态、 异步状态),讲实话,随便写写代码都是状态管理,但是这是我们的追求么?当然不是,我们需要优雅地对前端状态进行管理。在MVC架构中,可以简单映射为数据(Model)----界面(View)----交互操作(Controller)。
所谓的状态管理基本就是对数据和交互操作的管理。Redux基本就做了这样一件事情。
总结:
Redux源码基本做了两个操作:
1)维护一个状态树
2)状态的发布订阅
一、维护一个状态树、发布订阅
/** 创建状态树
* @param {Function} reducer:reducer就是你写的函数,actionType---->new state
* @param {any} preloadedState: store的初始状态,可以是任何形式,可以是函数,因为有的初始状态可能需要从服务端获取数据进行merge
* @param {Function} enhancer: 中间件,在action发出之前经历的一系列骚操作
* @returns {Store} :返回值是一个对象,可以对Store进行一系列操作,订阅、获取等
*/
export default function createStore(reducer, preloadedState, enhancer) {
// 在源码中,将preloadedState和enhancer可以看作是同一个作用的,就是在生成初始状态之前进行的一系列操作
if (
(typeof preloadedState === 'function' && typeof enhancer === 'function') ||
(typeof enhancer === 'function' && typeof arguments[3] === 'function')
) {
throw new Error(
'It looks like you are passing several store enhancers to ' +
'createStore(). This is not supported. Instead, compose them ' +
'together to a single function'
)
}
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
/**
* 如果定义了中间件,要到中间件中去执行相应的操作,传入的这几个参数有什么用?待会在中间件中解释
* @params {createStore}
* @params {reducer, preloadedState}
*/
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState)
}
/**
* 如果没有中间件,那么我们就继续执行,创建Store
* @variable
* -currentReducer:当前的reducer,也就是你传入的reducer
* -currentState:当前的状态,你传入的state的初始值,如果没有传入,undefiend
* -currentListe