redux mobx 状态管理 - kscarrot/blog GitHub Wiki

redux

核心代码简单实现

const createStore = (reducer, preloadedState, enhancer) => {
  if (typeof enhancer === 'function') {
    return enhancer(createStore)(reducer, preloadedState)
  }

  const store = {}
  store.state = preloadedState
  store.listensers = []

  store.subscribe = (listenser) => {
    store.listensers.push(listenser)
  }

  store.dispatch = (action) => {
    store.state = reducer(store.state, action)
    store.listensers.forEach((listenser) => listenser())
  }

  store.getState = () => store.state

  return store
}

核心有两点

初始化一个state,在执行dispatch时用reducer更新state
维护一个监听队列,在reducer之后触发更新相关的逻辑

中间件的实现

  const applyMidware = (...midwares) => (createStore) => (reducer, preloadedState) => {
  const store = createStore(reducer, preloadedState)
  let dispatch = () => {
    throw new Error('midaware dispatch error')
  }

  const midwareAPI = {
    getState: store.getState,
    dispatch: (action, preloadedState) => dispatch(action, preloadedState),
  }

  const chain = midwares.map((midware) => midware(midwareAPI))
  dispatch = compose(...chain)(store.dispatch)

  return { ...store, dispatch }
}

核心在于重写store的dispatch方法,在调用dispatch的时候,链式调用各个中间件.链式调用时通过compose来完成中间件函数的组合. 链式调用的中间件函数通过闭包拿到getState和dispatch

mobx

响应式的实现

核心有两部分

observer 通过挟持对象的get和set,在get时搜集依赖,在set是通知依赖进行更新响应式对象的创建有两个思路,第一个是Obejct.defineProperty,第二个是新的es6APIproxy.proxy出来兼容性的支持会差一些,整体功能会更加完备,不单单是劫持了key,对其他的诸如数组的操作也能保持正常的响应.
autoRun 包装需要响应更新的组件,当依赖发生变化时,自动执行.mobx-react通过改变props来完成组件的更新