redux código fuente es muy simple (en curso)

Entrada: index.js (directorio) Clave estándar de color rojo

importación createstore  de './createStore' 
importación combineReducers  de './combineReducers 
bindActionCreators importación de ' ./bindActionCreators 
importación applyMiddleware de './applyMiddleware' 
importación de redacción  de './compose' 
alerta de importación de './utils/warning' 
__DO_NOT_USE__ActionTypes importación de './utils/actionTypes
 // tipos // tienda de 
exportación {CombinedState, PreloadedState, Despacho , Darse de baja, Observable, Observador, tienda, StoreCreator, StoreEnhancer, StoreEnhancerStoreCreator, ExtendState} de './types/store' 
// reductores 
de exportación { Reductor , ReducerFromReducersMapObject, ReducersMapObject, StateFromReducersMapObject, ActionFromReducer, ActionFromReducersMapObject} de ' ./types/reducers'
 // creadores de acción 
de exportación {ActionCreator, ActionCreatorsMapObject} 'de ./types/actions' // middleware 
de exportación { MiddlewareAPI , middleware }' de ./types/middleware '
 // acciones 
de exportación { Acción , AnyAction} de' ./types/actions

exportación { createstore

  , CombineReducers , bindActionCreators, applyMiddleware , componer , __ DO_NOT_USE__ActionTypes 
}

 

Inicialización: createStore.js

createstore acepta tres parámetros ( el reductor , preloadedState?, Enhancer )

Primera mirada en el uso:

const tienda = createstore (rootReducer, applyMiddleware (el procesador)); 
 applyMiddleware aquí (Trunk), es decir potenciador, soporta los siguientes

 si ( typeof preloadedState === 'función' && typeof potenciador === 'indefinido' ) { 
　　potenciador = preloadedState como StoreEnhancer <Ext, StateExt> 　　preloadedState = indefinido } 

 

执行:

expedición ({type: ActionTypes.INIT} como A) // despacho内置acción来初始化
 
  const tienda = ({ 
    despacho: envío como de Despacho <A> , 
    suscribirse, 
    getState, 
    replaceReducer, 
    [$$ observable]: observable 
  } como desconocido) como tienda <ExtendState <S, StateExt>, A, StateExt, Ext> & Ext
   tienda de retorno

 

Mira método getState:

dejar que currentState = preloadedState como S  // preloadState参数

= False isDispatching let  // bloqueo, mientras que no cambia la adquisición de datos y datos

 función getState (): S { 

    si (isDispatching) { 
      throw new error ( 
        'Usted no puede llamar store.getState (), mientras que el reductor está ejecutando.' + 
          'El reductor ha recibido ya el estado como un argumento.' + 
          'Pass hacia abajo desde la parte superior del reductor en lugar de leerlo desde la tienda.' 
      ) 
    } 

    retorno currentState como S 
  }

 método sunscribe: función de parámetros

 

currentListeners let: (() => vacío ) [] | nula = [] // Inicializar la lista actual de suscriptores

nextListeners let = currentListeners // nueva lista de suscriptores

 

  función de suscribirse (oyente: () => vacío ) {
     si ( typeof ! oyente == 'función' ) {
       lanzar  nuevos ( 'espera que el oyente a una función' Error ) 
    } //锁
    
　　 si (isDispatching) { 
      throw new error ( 
        'no se puede llamar store.subscribe (), mientras que el reductor está ejecutando.' + 
          'Si desea ser notificado después de la tienda se ha actualizado, la suscripción a un' + 
          componente' e invocar store.getState () en la devolución de llamada para acceder al último estado. '+ 
          ' Ver https://redux.js.org/api-reference/store#subscribelistener para más detalles.'
      ) 
    } 

    Dejar que isSubscribed = true 

    ensureCanMutateNextListeners () 
    nextListeners.push (oyente)
　　

 　　ensureCanMutateNextListeners function () {

　　　 　// determinar si el mismo objeto

   　　 si (nextListeners === currentListeners) {

 　　     nextListeners = currentListeners.slice ()

  　　  }

　　  }

función de retorno para darse de baja () {
       si (! isSubscribed) {
         retorno 
      } //锁
      
　　　　 si (isDispatching) { 
        throw new Error ( 
          + 'Usted no puede darse de baja de un oyente tienda mientras el reductor está ejecutando.' 
            'Ver https: // redux .js.org / api Página / tienda # subscribelistener para más detalles.' 
        ) 
      } 
　　　　
      isSubscribed = false //设置已经退订

　　　　 ensureCanMutateNextListeners () // a la nueva lista de suscriptores

      índice nextListeners.indexOf = const (oyente) 
      nextListeners.splice (índice, 1) // eliminar el abonado 
      currentListeners = null 
    } 
  }

 

función de despacho  

El parámetro es la acción

dejar que currentReducer = reductor //第一个参数reducer

 

la función  de despacho (acción: A) { 
  si (isPlainObject (acción)) { 
      throw new Error ( 
        'acciones deben ser objetos de civil.' + 
          'Uso de middleware personalizado para acciones asincrónicos.' 
      ) 
    } 

    si (typeof action.type === 'indefinido') { 
      throw new Error ( 
        'acciones pueden no tener una propiedad de "tipo" sin definir.' + 
          '¿usted ha escrito mal una constante?' 
      ) 
    } //同步互斥
    
　　 si (isDispatching) {
       lanzar  nuevos error ( 'Reductores puede no despachar acciones '.) 
    } 

    Tratar { 
      isDispatching =verdadera 
　　　　//执行传入参数的reductor 
      currentState = currentReducer (currentState, acción) 
    } finalmente { 
      isDispatching = false 
    } 

    oyentes const = (currentListeners = nextListeners) 
    para (dejar que i = 0; i <listeners.length; i ++) { 
      oyente const = oyentes [i] 
      oyente () 
    } 

    de retorno de acción 
  }

 otros:

replaceReducer // 替换 reductor

observables // redux funciones incorporadas

 

 página siguiente 

applyMiddleware.ts