redux source code is very simple (in progress)

Entrance: index.js (directory) Key standard red

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'
import __DO_NOT_USE__ActionTypes from './utils/actionTypes'
// types// store
export {CombinedState, PreloadedState, Dispatch, Unsubscribe,  Observable, Observer, Store, StoreCreator, StoreEnhancer, StoreEnhancerStoreCreator,ExtendState} from './types/store'
// reducers
export {Reducer,ReducerFromReducersMapObject,ReducersMapObject,StateFromReducersMapObject,ActionFromReducer,ActionFromReducersMapObject} from './types/reducers'
// action creators
export { ActionCreator, ActionCreatorsMapObject } from './types/actions'
// middleware
export { MiddlewareAPI, Middleware } from './types/middleware'
// actions
export { Action, AnyAction } from './types/actions'

export {
  createStore,combineReducers,bindActionCreators,applyMiddleware,compose,__DO_NOT_USE__ActionTypes
}

 

Initialization: createStore.js

createStore accepts three parameters ( the reducer , preloadedState ?, Enhancer )

First look at the usage:

Store const = createstore (rootReducer, applyMiddleware (the thunk)); 
 applyMiddleware here (Trunk) i.e. enhancer, supports the following

 if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') { 
　　enhancer = preloadedState as StoreEnhancer<Ext, StateExt> 
　　preloadedState = undefined 
} 

执行:

dispatch({ type: ActionTypes.INIT } as A) //dispatch 内置 action 来初始化

  const store = ({
    dispatch: dispatch as Dispatch<A>,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  } as unknown) as Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
  return store

 

Look at getState method:

let currentState = preloadedState as S //preloadState参数

= isDispatching to false the let  // lock, while not changing the data acquisition and data

 function getState(): S {

    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 as S
  }

 sunscribe method: Parameter function

 

currentListeners the let: (() => void ) [] | null = [] // Initialize the current subscriber list

nextListeners the let = currentListeners // new subscriber list

 

  function subscribe(listener: () => void) {
    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#subscribelistener for more details.'
      )
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)
　　

 　　function ensureCanMutateNextListeners() {

　　　 　// determine whether the same object

   　　 if (nextListeners === currentListeners) {

 　　     nextListeners = currentListeners.slice()

  　　  }

　　  }

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-reference/store#subscribelistener for more details.'
        )
      }
　　　　
      isSubscribed = false //设置已经退订

　　　　 ensureCanMutateNextListeners () // to the new subscriber list

      nextListeners.indexOf index = const (listener) 
      nextListeners.splice (index, 1) // delete the subscriber 
      currentListeners = null 
    } 
  }

 

dispatch function  

Parameter is action

let currentReducer = reducer //第一个参数reducer

 

function dispatch(action: A) { 
 if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }

    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 {
      isDispatching = true
　　　　//执行传入参数的reducer
      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
  }

 other:

replaceReducer //替换reducer

observable // redux built-in functions

 

 Next page 

applyMiddleware.ts