从 Redux 设计理念到源码分析

`// 定义的一个函数，接受 S 和继承 Action 默认为 AnyAction 的 A,返回 S
export type Reducer = (
state: S | undefined,
action: A
) => S
// 可以理解为 S 的 key 作为ReducersMapObject的 key，然后 value 是  Reducer的函数。in 我们可以理解为遍历
export type ReducersMapObject = {
[K in keyof S]: Reducer
}` 

`export type StateFromReducersMapObject = M extends ReducersMapObject<
any,
any
? { [P in keyof M]: M[P] extends Reducer ? S : never }
: never
export type ReducerFromReducersMapObject = M extends {
[P in keyof M]: infer R
}
? R extends Reducer
? R
: never
: never` 

// A extends Action dispatch({ type: ActionTypes.INIT } as A) 

function getState(): S { if (isDispatching) { throw new Error(我 reducer 正在执行，newState 正在产出呢！现在不行`
)
}
return currentState as S
}` 

`const unsubscribe = store.subscribe(() =>
console.log(store.getState())
)
unsubscribe();` 

function subscribe(listener: () => void) { // 如果 listenter 不是一个 function，我就报错（其实 ts 静态检查能检查出来的，但！那是编译时，这是运行时） if (typeof listener !== 'function') { throw new Error('Expected the listener to be a function.') } // 同 getState 一个样纸 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/store#subscribelistener for more details.'
)
}
let isSubscribed = true
ensureCanMutateNextListeners()
// 直接将监听的函数放进nextListeners里
nextListeners.push(listener)
return function unsubscribe() {// 也是利用闭包，查看是否以订阅，然后移除订阅
  if (!isSubscribed) {
    return
  }
  if (isDispatching) {
    throw new Error(
      'You may not unsubscribe from a store listener while the reducer is executing. ' +
      'See https://`Redux`.js.org/api/store#subscribelistener for more details.'
    )
  }
  isSubscribed = false//修改这个订阅状态
  ensureCanMutateNextListeners()
  //找到位置，移除监听
  const index = nextListeners.indexOf(listener)
  nextListeners.splice(index, 1)
  currentListeners = null
}
}` 

`let currentListeners: (() => void)[] | null = []
let nextListeners = currentListeners
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}` 

`function dispatch(action: A) {
// action必须是个普通对象
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
// 必须包含 type 字段
if (typeof action.type === 'undefined') {
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 {
  // 设置正在 dispatch 的 tag 为 true（解释了那些判断都是从哪里来的了）
  isDispatching = true
  // 通过传入的 reducer 来去的新的 state
  //  let currentReducer = reducer
  currentState = currentReducer(currentState, action)
} finally {
// 修改状态
  isDispatching = false
}
// 将 nextListener 赋值给 currentListeners、listeners (注意回顾 ensureCanMutateNextListeners )
const listeners = (currentListeners = nextListeners)
// 挨个触发监听
for (let i = 0; i < listeners.length; i++) {
  const listener = listeners[i]
  listener()
}
return action
}` 

`let currentListeners: (() => void)[] | null = []
let nextListeners = currentListeners
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}
function subscribe(listener: () => void) {
// ...
ensureCanMutateNextListeners()
nextListeners.push(listener)
return function unsubscribe() {
  ensureCanMutateNextListeners()
  const index = nextListeners.indexOf(listener)
  nextListeners.splice(index, 1)
  currentListeners = null
}
}
function dispatch(action: A) {
// ...
const listeners = (currentListeners = nextListeners)
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
// ...
return action
}`