源码共读-Redux

发表于 | 分类于 |

Redux是优秀的状态管理库，本节我们学习一下Redux源码，由于Redux源码是TypeScript写的，为了方便学习，本节去掉一些类型定义，转化为JavaScript来展示，另外对于错误信息我们这里就先不处理了。

使用

Redux官方示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createStore } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

let store = createStore(counterReducer)

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'counter/incremented' }) // {value: 1}
store.dispatch({ type: 'counter/incremented' }) // {value: 2}
store.dispatch({ type: 'counter/decremented' }) // {value: 1}

createStore

createStore简易实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const randomString = () =>
  Math.random().toString(36).substring(7).split('').join('.')

const ActionTypes = {
  INIT: `@@redux/INIT${/* #__PURE__ */ randomString()}`,
  REPLACE: `@@redux/REPLACE${/* #__PURE__ */ randomString()}`,
}

function createStore(reducer, preloadedState, enhancer) {

  // 如果第二个参数是函数 第三个函数没有值的时候 认为第二个参数是enhancer
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  // enhancer有值的时候 使用enhancer来构建store
  if (typeof enhancer !== 'undefined') {
    return enhancer(createStore)(
      reducer,
      preloadedState
    )
  }

  let currentReducer = reducer
  let currentState = preloadedState
  let listeners = [];

  function getState() {
    return currentState
  }

  function subscribe(listener) {
    listeners.push(listener)

    return function unsubscribe() {
      const index = listeners.indexOf(listener)
      listeners.splice(index, 1)
    }
  }

  function dispatch(action) {
    currentState = currentReducer(currentState, action)

    listeners.forEach(listener => {
      listener()
    })
    return action
  }

  function replaceReducer(nextReducer) {
    currentReducer = nextReducer
    dispatch({ type: ActionTypes.REPLACE })
  }

  dispatch({ type: ActionTypes.INIT })

  const store = {
    dispatch: dispatch,
    subscribe,
    getState,
    replaceReducer,
  }
  return store
}

上述是createStore的简单实现，调用createStore()函数以后返回一个store对象，该对象有4个方法，如下：

1：dispatch：分发action，通过currentReducer(currentState, action)来生成新的state，并触发事件。
2: subscribe: 监听事件，实际上就是把事件添加到事件数组中，并返回移除事件函数。
3: getState：获取当前的状态。
4: replaceReducer：替换reducer。

最新的源码与我们的实现理念大致相同，只是多了类型的校验，另外事件采用双map形式（防止dispatch中调用subscribe/unsubscribe）而不是我们简单的数组，最后在事件触发时会使用变量标记，防止在分发过程中出现不合理的操作。

中间件

中间件简绍

写一个redux中间件很简单，比如写一个打印日志的中间件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const logger = function(store) {
  return function(next) {
    return function(action) {
      console.log('prev state:', store.getState()) // 更新前的状态
      let result = next(action)
      console.log('next state', store.getState()) // 更新后的状态
      return result
    }
  }
}

// 箭头函数简写
const logger = store => next => action => {
  console.log('prev state:', store.getState()) // 更新前的状态
  let result = next(action)
  console.log('next state', store.getState()) // 更新后的状态
  return result
}

中间件是一个嵌套三层的函数，每一层都有一个参数，参数分别是store、next、action。上面是redux-logger中间件的简单实现，常用的中间件还有redux-thunk，核心代码如下：

1
2
3
4
5
6
7
const thunk = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState)
  }

  return next(action)
}

redux-thunk的逻辑也很简单，通过对store解构获取dispatch和getState函数，如果action是函数则调用action，否则调用next(action)进行下一个中间件。在action函数中可以通过dispatch来触发action，哪怕是在异步的回调中，所以redux-thunk通常用来处理异步操作。

中间件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { createStore, applyMiddleware } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// 带有中间件的store
let store = createStore(counterReducer, applyMiddleware(thunk, logger))

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'counter/incremented' })
// 打印：
// prev state: { value: 0 }
// { value: 1 }
// next state { value: 1 }

store.dispatch((dispatch, getState) => { // 异步操作
  setTimeout(() => {
    dispatch({ type: 'counter/incremented' })
  }, 1000)
})
// 1秒后打印：
// prev state: { value: 1 }
// { value: 2 }
// next state { value: 2 }

需要注意的是applyMiddleware是有顺序的，它会从做左到右依次执行，next后是从右到左执行。如果上述示例修改为applyMiddleware(logger, thunk)会发生什么事呢？那么在调用store.dispatch(() => {})的时候也会打印日志，里面的dispatch又会打印一次。

applyMiddleware实现

由上createStore函数可知，当传入中间件的时候会通过enhancer来生成store。enhancer实际上就是applyMiddleware(logger, thunk)的结果，它是一个两层函数，第一层接受的参数是createStore第二次接受的参数是reducer和preloadedState，代码大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function compose(...funcs) {
  if (funcs.length === 0) {
    return (arg) => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce(
    (a, b) =>
      (...args) =>
        a(b(...args))
  )
}

function applyMiddleware(...middlewares) {
  return createStore => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

首先通过createStore(reducer, preloadedState)不传中间件来创建store，applyMiddleware内层函数的返回值只有dispatch是处理过的函数，其他的都是与store中的一致，也就是说中间件的作用实际上是强化dispatch函数。middlewareAPI实际上就是中间件的第一层函数的参数store，这里需要注意的是dispatch调用的时候，下面的代码已经走完了，所以里面的dispatch函数是加强后的dispatch而不是上面定义的抛出异常的函数。通过middlewares.map(middleware => middleware(middlewareAPI))去掉了中间件第一层函数。compose核心逻辑是funcs.reduce((a, b) => (...args) => a(b(...args)))对于函数数组返回嵌套执行的组合函数，compose(...chain)(store.dispatch)最后参数是store.dispatch，比如有两个中间件a和b，这里相当于变成a(b(store.dispatch))，相当于a这一层的next函数是b(store.dispatch)函数。

-------------本文结束 感谢您的阅读-------------
0%