redux 原理以及实现

const store = createStore(reducer)
const next = store.dispatch

const loggerMiddleware = store => next => action => {
  console.log(‘this state‘, store.getState())
  console.log(‘action‘, action)
  next(action)
  console.log(‘next state‘, store.getState())
}

const exceptionMiddleware = store => next => action => {
  try {
    next(action)
  } catch (err) {
    console.error(‘错误报告: ‘, err)
  }
}

const logger = loggerMiddleware(store)
const exception = exceptionMiddleware(store)
store.dispatch = exception(logger(next))

const timeMiddleware = store => next => action => {
  console.log(‘time‘, new Date().getTime())
  next(action)
}

const time = timeMiddleware(store)
store.dispatch = exception(time(logger(next)))

let store = createStore(reducers)
const next = store.dispatch

const loggerMiddleware = store => next => action => {
  console.log(‘this state‘, store.getState())
  console.log(‘action‘, action)
  next(action)
  console.log(‘next state‘, store.getState())
}

const exceptionMiddleware = store => next => action => {
  try {
    next(action)
  } catch (err) {
    console.error(‘错误报告: ‘, err)
  }
}

const timeMiddleware = store => next => action => {
  console.log(‘time‘, new Date().getTime())
  next(action)
}

const time = timeMiddleware(store)
const logger = loggerMiddleware(store)
const exception = exceptionMiddleware(store)
store.dispatch = exception(time(logger(next)))

/*接收旧的 createStore，返回新的 createStore*/
const newCreateStore = applyMiddleware(
  exceptionMiddleware,
  timeMiddleware,
  loggerMiddleware
)(createStore)

/*返回了一个 dispatch 被重写过的 store*/
const store = newCreateStore(reducer)

const applyMiddleware = function(...middlewares) {
  /*返回一个重写createStore的方法*/
  return function rewriteCreateStoreFunc(oldCreateStore) {
    /*返回重写后新的 createStore*/
    return function newCreateStore(reducer, initState) {
      /*1. 生成store*/
      const store = oldCreateStore(reducer, initState)
      /*给每个 middleware 传下store，相当于 const logger = loggerMiddleware(store);*/
      /* const chain = [exception, time, logger]*/
      const chain = middlewares.map(middleware => middleware(store))
      let dispatch = store.dispatch
      /* 实现 exception(time((logger(dispatch))))*/
      chain.reverse().map(middleware => {
        dispatch = middleware(dispatch)
      })

      /*2. 重写 dispatch*/
      store.dispatch = dispatch
      return store
    }
  }
}

/*没有中间件的 createStore*/
let store = createStore(reducers, initState)

/*有中间件的 createStore*/
const rewriteCreateStoreFunc = applyMiddleware(
  exceptionMiddleware,
  timeMiddleware,
  loggerMiddleware
)
const newCreateStore = rewriteCreateStoreFunc(createStore)
const store = newCreateStore(reducer, initState)

function createStore(reducer, initState, rewriteCreateStoreFunc) {
  /*如果有 rewriteCreateStoreFunc，那就采用新的 createStore */
  if (rewriteCreateStoreFunc) {
    const newCreateStore = rewriteCreateStoreFunc(createStore)
    return newCreateStore(reducer, initState)
  }
  /*否则按照正常的流程走*/
  //...
}

const rewriteCreateStoreFunc = applyMiddleware(
  exceptionMiddleware,
  timeMiddleware,
  loggerMiddleware
)
const store = createStore(reducer, initState, rewriteCreateStoreFunc)

const chain = [A, B, C]
let dispatch = store.dispatch
chain.reverse().map(middleware => {
  dispatch = middleware(dispatch)
})

const chain = [A, B, C]
dispatch = compose(...chain)(store.dispatch)

export default function compose(...funcs) {
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

const store = createStore(reducer, {}, rewriteCreateStoreFunc)

const store = createStore(reducer, rewriteCreateStoreFunc)

function craeteStore(reducer, initState, rewriteCreateStoreFunc) {
  if (typeof initState === ‘function‘) {
    rewriteCreateStoreFunc = initState
    initState = undefined
  }
  //...
}

import React, { Component } from ‘react‘
import PropTypes from ‘prop-types‘
import bindActionCreators from ‘../redux/bindActionCreators‘

export default function connect(mapStateToProps, mapDispatchToProps) {
  return function(Component) {
    class Connect extends React.Component {
      componentDidMount() {
        // 从context获取store并订阅更新
        this.context.store.subscribe(this.handleStoreChange.bind(this))
      }
      handleStoreChange() {
        // 触发的方法有多种,这里为了简洁起见,直接forceUpdate强制更新,读者也可以通过setState来触发子组件更新
        this.forceUpdate()
      }

      render() {
        const dispathProps =
          typeof mapDispatchToProps &&
          bindActionCreators(mapDispatchToProps, this.context.store.dispatch)

        return (
          <Component
            // 传入该组件的props,需要由connect这个高阶组件原样传回原组件
            {...this.props}
            // 根据mapStateToProps把state挂到this.props上
            {...mapStateToProps(this.context.store.getState())}
            // 根据mapDispatchToProps把dispatch(action)挂到this.props上
            {...dispathProps}
          />
        )
      }
    }
    // 接收context的固定写法
    Connect.contextTypes = {
      store: PropTypes.object
    }
    return Connect
  }
}