Redux源码分析之createStore

Redux源码分析之基本概念

Redux源码分析之createStore

Redux源码分析之bindActionCreators

Redux源码分析之combineReducers

Redux源码分析之compose

 Redux源码分析之applyMiddleware 

 

接着前面的，我们继续，打开createStore.js, 直接看最后， createStore返回的就是一个带着5个方法的对象。

return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}

 同样的，我先删除一些不需要的代码，简化成如下, 注意看备注。（注：这里先无视中间件和enhancer,后篇再说）

export const ActionTypes = {
INIT: '@@redux/INIT'
}
export default function createStore(reducer, preloadedState, enhancer) {
// 初始化参数
let currentReducer = reducer      // 整个reducer
let currentState = preloadedState //当前的state, getState返回的值就是他，
let currentListeners = []         // 当前的订阅，搭配 nextListeners
let nextListeners = currentListeners  //下一次的订阅 ,搭配currentListeners
let isDispatching = false  //是否处于 dispatch action 状态中

// 内部方法
function ensureCanMutateNextListeners() { }  // 确保currentListeners 和 nextListeners 是不同的引用
function getState() { }    // 获得当前的状态，返回的就是currentState
function subscribe(listener) { }  //订阅监听，返回一个函数，执行该函数，取消监听
function dispatch(action) { }    // dispacth action
function replaceReducer(nextReducer) { }  // 替换 reducer
function observable() { }   //不知道哈哈

//初始化state
dispatch({ type: ActionTypes.INIT })

//返回方法
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}
}

　

ensureCanMutateNextListeners

这个方法主要用在 subscribe里面，

• 在每次订阅和取消订阅的时候，会让 nextListeners 和 currentListeners 不是同一个引用，
• 在每次 dispatch的时候，当 reducer执行完毕，订阅执行前，让 nextListeners 和 currentListeners 是一个引用  

function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}

　　为什么这么设计，在subscribe方法上有很详细的注解，我的理解是假如订阅在执行过程中，这里说的是订阅执行过程，不是reducer执行过程

       有新加的订阅添加的时候，新的订阅是不会被执行的，因为是一份拷贝

       有新的订阅删除的时候，被删除的还是会执行的。

       简单说，就是新的删除和添加，下次生效。

  getState 就是返回利用闭包存的currentState

/**
* Reads the state tree managed by the store.
*
* @returns {any} The current state tree of your application.
*/
function getState() {
return currentState
}

　

 subscribe

   添加订阅

• 每次添加前，如果 nextListeners 和 currentListeners 是一个引用，重新复制一个
• 并存入 nextListeners 
• 返回一个函数，执行该函数取消订阅，

function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected listener to be a function.')
}

let isSubscribed = true

ensureCanMutateNextListeners() //复制新的
nextListeners.push(listener)

return function unsubscribe() {
if (!isSubscribed) {
return
}

isSubscribed = false

ensureCanMutateNextListeners() // 复制新的
const index = nextListeners.indexOf(listener)
nextListeners.splice(index, 1) // 从nextListeners里面删除，下次dispatch会生效
}
}

 

dispatch

派发一个action，让reducer更新数据,下面都有注释了，为啥可说的。

• 　如果上一次派发没完毕，接着派发是会出异常的，对于单线程的js来说倒是没啥大问题

function dispatch(action) {
if (!isPlainObject(action)) { // action 必须是对象
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}

if (typeof action.type === 'undefined') {  // 必须有type属性
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}

if (isDispatching) {  // 正在派发，抛出异常
throw new Error('Reducers may not dispatch actions.')
}

try {
isDispatching = true  // 标记，正在派发
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false  //标记派发完毕
}

const listeners = currentListeners = nextListeners  // 让nextListeners生效
for (let i = 0; i < listeners.length; i++) {  // 挨个执行订阅
const listener = listeners[i]
listener()
}

return action // 返回action
}

　　

replaceReducer

function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {  // 不是函数，抛出异常
throw new Error('Expected the nextReducer to be a function.')
}

currentReducer = nextReducer  // 替换reducer
dispatch({ type: ActionTypes.INIT }) // 重新初始化
}

　　

observable 还没啥研究，暂不说了。 最后的代码为， 

• 初始化 state

• 返回相关方法

dispatch({ type: ActionTypes.INIT })

return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}

　　这里说一下 dispatch({ type: ActionTypes.INIT }) 是怎么达到初始化state的，

　　我们再回头看一下disptach中的一段代码

try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}

      这里先讲非合成的reducer，带合成的后面说。

   createStore的第一个参数为 reducer，第二个为初始化state的默认值，

•  如果你传入了第二个参数，currentState就等于你传入的值，而执行一次 dispatch的时候，系统定义的 type 为@@redux/INIT的action，你肯定是没有定义的额，看下面代码，就会直接返回state，   那么执行 currentReducer(currentState, action) 得到的结果还是 currentState
• 如果你没有传入第二个参数，在reducer的第一个参数指定了默认值，那么reducer处理type为 @@redux/INIT的action的时候，返回的就是reducer第一个参数 state的默认值，然后被赋值给了currentState
• 如果没有传入第二个参数，同时reducer的state也没指定值，那么，你的dispatch一般都会报错，因为你的state从开始就是undefined
• 如果recuder函数和createStore都设置了默认了，那么reducer的默认值是不会生效的

let todoReducer = function (state = todoList, action) {
switch (action.type) {
case 'add':
return [...state, action.todo]
case 'delete':
return state.filter(todo => todo.id !== action.id)
default:
return state
}
}

　　这里相对特别的是 合成recuder，后面再说。

　

 到此为止，你只用redux的createStore方法，就能完成数据控制了，combineReducers，bindActionCreators，applyMiddleware，compose 都只是对redux的增强。

再回头看看我们第一篇提到的代码：（云淡风轻）

• 初始化的state在recuder赋值，和在createStore赋值是等价的，都赋值的话，createStore的赋值会生效。　(createStore用的是显示赋值， reducer：默认参数)　

/* 简单示例 */
let { createStore } = self.Redux

//默认state
let todoList = []
// reducer
let todoReducer = function (state, action) {
switch (action.type) {
case 'add':
return [...state, action.todo]
case 'delete':
return state.filter(todo => todo.id !== action.id)
default:
return state
}
}

//创建store
let store = createStore(todoReducer,todoList)

//订阅
function subscribe1Fn() {
console.log(store.getState())
}
let sub = store.subscribe(subscribe1Fn)

store.dispatch({
type: 'add',
todo: {
id: 1,
content: '学习redux'
}
})

store.dispatch({
type: 'add',
todo: {
id: 2,
content: '吃饭睡觉'
}
})

store.dispatch({
type: 'delete',
id: 2
})

// 取消订阅
sub()

console.log('取消订阅后：')
store.dispatch({
type: 'add',
todo: {
id: 3,
content: '打游戏'
}
})