这篇文章会很长。redux源码读起来并不困难。读懂redux的源码有利于更好的使用redux。
但是react-redux复杂多。所以分阶段写。
redux源码分析
在使用redux中，比较重要的三个函数: createStore,store.dispatch,reducer。其中有一个比较难以理解的点是,为什么reducer每次都要返回一个新的变量。我们先来分析 createStore函数。
redux整个设计遵循的是订阅-更新模式。
export default function createStore(reducer, preloadedState, enhancer) {
let currentReducer = reducer
let currentState = preloadedState
let currentListeners = []
let nextListeners = currentListeners
let isDispatching = false
function getState() {
if (isDispatching) {
throw new Error(
'You may not call store.getState() while the reducer is executing. ' +
'The reducer has already received the state as an argument. ' +
'Pass it down from the top reducer instead of reading it from the store.'
)
}
return currentState
}
}
其中，currentState是维持在createStore的中的变量。也是存储整个工程的state数据的变量。
- dispatch函数
function dispatch(action) {
...
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
const listeners = (currentListeners = nextListeners)
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
return action
}
dispatch函数可以看到reducer的设计思想。currentReducer是我们调用createStore时传递进来的reducer函数。一般reducer函数是这样定义的：
const reducers = (state = initialState, action) => {
let newState = Object.assign({}, state);
switch (action.type) {
case types.GET_ORDERS:
newState.orderInfo = action.response;
case types.GET_GOODS:
newState.goodsInfo = action.response;
case types.SET_ALL_EXPRESS_COMPANY:
newState.expressCompany = action.response;
case types.SET_EXPRESS_COMPANY:
newState.expressInfo = {
trackingNumber: state.expressInfo.trackingNumber,
shippingId: action.response.shippingId,
shippingName: action.response.shippingName,
}
case types.SET_EXPRESS_STATUS:
newState.showExpressSuccessModal = action.response;
case types.INIT_TRACK_NUMBER:
newState.expressInfo = {
trackingNumber: action.response,
shippingId: state.expressInfo.shippingId,
shippingName: state.expressInfo.shippingName,
}
}
return newState
}
export default reducers
而action的数据格式一般是这样的：
{
type: types.SEND_GOODS,
response: response
}
连在一起看语句currentState = currentReducer(currentState, action) 是不是好懂很多呢？将保存在store上的state传入reducer函数中，获得新的state(要复制一份state的原因还不清楚)
接下来
const listeners = (currentListeners = nextListeners)
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
那么currentListeners何时更新？我们接着看一下subscribe函数。
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.')
}
if (isDispatching) {
throw new Error(
'You may not call store.subscribe() while the reducer is executing. ' +
'If you would like to be notified after the store has been updated, subscribe from a ' +
'component and invoke store.getState() in the callback to access the latest state. ' +
'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
)
}
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)
}
}
执行subscribe函数，实际上就是将回调函数加入nextListeners这个list中，当执行dispatch时，nextListeners中每个listener函数会顺序执行。这样就完成了每次store中数据发生变更,subscribe中函数就会执行一次。至于为什么会有两个变量currentListeners和nextListeners来维持回调队列，还不是很清楚原因。
最后提出三个问题：
- 为什么reduce函数中中要返回新的state
- 为什么listener也要保持纯净
- 为什么react中这么喜欢使用mutual哲学
后续更新：
- observable 由于没有用过
observable,这部分的源码先不看。
react-redux源码分析
- 如何感知store的变化
- 如何修改state的变化
