插件开发

插件的定义如下:

export default function plugin(event, option) {}

option <Object>

  • option.DIVIDER <String> 分隔modalName与actionName的符号,值为/
  • option.PLUGIN_EVENT <String> 完整的支持的事件名称定义

event <Object>

通过event事件监听器,我们可以获取到整个应用在加载过程中,触发的事件,通过这些事件,可以灵活实现各种功能,比如内置的loading插件实现,利用如下3个事件实现:

function(event, { DIVIDER, PLUGIN_EVENT }) {
    // 创建一个loading的model
    const loadingModel = createLoadingModel(loadingNamespace)

    // 利用model注入事件,注入loading model到应用中
    event.on(PLUGIN_EVENT.INJECT_MODELS, function() {
      return [loadingModel]
    })

    // 监听异步action执行开始时,设置对应的loading状态
    event.on(PLUGIN_EVENT.ON_WILL_EFFECT, function(action, { dispatch }) {
      const { namespace, type } = splitType(action.type, DIVIDER)

      dispatch({
        type: `${loadingNamespace}${DIVIDER}loading`,
        payload: { modelName: namespace, effectName: type },
        meta: action.meta,
      })
    })

    // 监听异步action执行结束时,设置对应的loading状态
    event.on(PLUGIN_EVENT.ON_DID_EFFECT, function(action, { dispatch }) {
      const { namespace, type } = splitType(action.type)

      dispatch({
        type: `${loadingNamespace}${DIVIDER}loaded`,
        payload: { modelName: namespace, effectName: type },
        meta: action.meta,
      })
    })
  }

loading model的具体实现,这里不列出了,有兴趣的可以直接去LOADING插件源码

PLUGIN_EVENT

PLUGIN_EVENT = {
  INJECT_INITIAL_STATE: 'injectInitialState',
  INJECT_MODELS: 'injectModels',
  INJECT_MIDDLEWARES: 'injectMiddlewares',
  INJECT_ENHANCERS: 'injectEnhancers',
  ON_REDUCER: 'onReducer',
  ON_BEFORE_CREATE_MODEL: 'onBeforeCreateModel',
  ON_AFTER_CREATE_MODEL: 'onAfterCreateModel',
  ON_SETUP_MODEL: 'onSetupModel',
  ON_WILL_EFFECT: 'onWillEffect',
  ON_DID_EFFECT: 'onDidEffect',
  ON_WILL_ACTION: 'onWillAction',
  ON_DID_ACTION: 'onDidAction',
  ON_SETUP: 'onSetup',
  ON_SUBSCRIBE: 'onSubscribe',
  ON_ERROR: 'onError',
  ON_WILL_CONNECT: 'onWillConnect',
  ON_DID_CONNECT: 'onDidConnect',
}

PLUGIN_EVENT.INJECT_INITIAL_STATE

用于注入初始化state, 返回值为新的initialState

event.on(PLUGIN_EVENT.INJECT_INITIAL_STATE, function(initialState) {
  // 添加自定义的初始化customInitalState
  return { ...initialState, ...customInitalState }
})

PLUGIN_EVENT.BEFORE_INJECT_MODEL(3.x版本后已废弃)

注入model前执行,返回值为修改过后的model定义

event.on(PLUGIN_EVENT.BEFORE_INJECT_MODEL, function(modelConfig) {
  return { ...modelConfig, ...newModelConfig }
})

PLUGIN_EVENT.AFTER_INJECT_MODEL(3.x版本后已废弃)

注入model后执行

event.on(PLUGIN_EVENT.AFTER_INJECT_MODEL, function(modelConfig) {})

PLUGIN_EVENT.INJECT_MODELS

注入新的models,返回值为需要注入的model数组

event.on(PLUGIN_EVENT.INJECT_MODELS, function() {
    return [modelConfig, ...]
})

PLUGIN_EVENT.INJECT_MIDDLEWARES

注入middleware, 返回值需要注入的middleware数组

event.on(PLUGIN_EVENT.INJECT_MIDDLEWARES, function() {
    return [middleware]
})

PLUGIN_EVENT.INJECT_ENHANCERS

注入enhancer, 返回值需要注入的enhancer数组

event.on(PLUGIN_EVENT.INJECT_ENHANCERS, function() {
    return [enhancer]
})

PLUGIN_EVENT.ON_REDUCER

重定义reducer

event.on(PLUGIN_EVENT.ON_REDUCER, function(reducer, { namespace }) {
    return undoable(reducer)
})

PLUGIN_EVENT.ON_CREATE_MODEL(3.x版本后已废弃)

创建model完成后执行,此时的model不再是配置,而是真正的model对象

event.on(PLUGIN_EVENT.ON_CREATE_MODEL, function(model) {})

PLUGIN_EVENT.ON_BEFORE_CREATE_MODEL(3.x版本后新增)

创建model实例前触发,此时会传递model配置,可用于修改model配置

event.on(PLUGIN_EVENT.ON_BEFORE_CREATE_MODEL, function(modelConfig) {
  return newModelConfig
})

PLUGIN_EVENT.ON_AFTER_CREATE_MODEL(3.x版本后新增)

创建model实例完成后触发,此时传递model实例,dispatcher便是基于此事件

event.on(PLUGIN_EVENT.ON_AFTER_CREATE_MODEL, function(model) {})

PLUGIN_EVENT.ON_SETUP_MODEL

调用app.start()或者app.setup()时触发

event.on(PLUGIN_EVENT.ON_SETUP_MODEL, function(model) {})

PLUGIN_EVENT.ON_WILL_EFFECT

调用异步action时触发

// 2.x 版本
event.on(PLUGIN_EVENT.ON_WILL_EFFECT, function(action, store) {})
// 3.x 版本, 可监听修改action
event.on(PLUGIN_EVENT.ON_WILL_EFFECT, function(action, { store, effectId }) {
  return newAction
})

PLUGIN_EVENT.ON_DID_EFFECT

调用异步action结束时触发

// 2.x 版本
event.on(PLUGIN_EVENT.ON_DID_EFFECT, function(action, store) {})
// 3.x 版本
event.on(PLUGIN_EVENT.ON_DID_EFFECT, function(action, { store, effectId }))

PLUGIN_EVENT.ON_WILL_ACTION

调用同步action时触发

// 2.x 版本
event.on(PLUGIN_EVENT.ON_WILL_ACTION, function(action, store) {})
// 3.x 版本,可监听修改action
event.on(PLUGIN_EVENT.ON_WILL_ACTION, function(action, { store, actionId }) {
  return newAction
})

PLUGIN_EVENT.ON_DID_ACTION

调用同步action结束时触发

// 2.x 版本
event.on(PLUGIN_EVENT.ON_DID_ACTION, function(action, store) {})
// 3.x 版本
event.on(PLUGIN_EVENT.ON_DID_ACTION, function(action, { store, actionId }) {})

PLUGIN_EVENT.ON_SETUP

调用app.start()或者app.setup()时触发

event.on(PLUGIN_EVENT.ON_SETUP, function(store) {})

PLUGIN_EVENT.ON_SUBSCRIBE

redux状态改变时调用

event.on(PLUGIN_EVENT.ON_SUBSCRIBE, function(store) {})

PLUGIN_EVENT.ON_ERROR

异步action发生异常时触发

// 2.x 版本
event.on(PLUGIN_EVENT.ON_ERROR, function(error, action, store) {})
// 3.x 版本
event.on(PLUGIN_EVENT.ON_ERROR, function(error) {})

results matching ""

    No results matching ""