Redux源码分析之基本概念Redux源码分析之createStoreRedux源码分析之bin...
接着前面的，我们继续，打开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//默认statelet todoList = []// reducerlet 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 }}//创建storelet 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: '打游戏' }})
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
