redux核心思路和代码解析

最近在公司内部培训的时候，发现很多小伙伴只是会用redux、react-redux、redux-thunk的api,对于其中的实现原理和数据真正的流向不是特别的清楚，知其然，也要知其所以然,其实redux的源代码非常简介，下面逐一介绍，

1.先看一个简单的redux应用的例子：

import { createStore, combineReducers } from 'redux';

const year = (state, action) => {
    let defaultState = {
        year: 2017
    }
    state = state || defaultState;
    switch (action.type) {
        case 'add':
            return {
                year: state.year + 1
            };
            break;
        case 'sub':
            return {
                year: state.year - 1
            };
            break;
        default:
            return state;
            break;
    }
}

const count = (state, action) => {
    let defaultState = {
        count: 1
    }
    state = state || defaultState;
    switch (action.type) {
        case 'addone':
            return {
                count: state.count + 1
            };
            break;
        case 'subone':
            return {
                count: state.count - 1
            };
            break;
        default:
            return state;
            break;
    }
}

const reducer = combineReducers({
    year: year,
    count: count
})

const store = createStore(reducer);

store.subscribe(() => {
    console.log('the year is ' + store.getState().year.year);
});
store.subscribe(() => {
    console.log('数字是' + store.getState().count.count);
});

const action1 = {
    type: 'add'
}
const action2 = {
    type: 'addone'
}
const action3 = {
    type: 'hello'
}

store.dispatch(action1);
store.dispatch(action2);
store.dispatch(action3);

上面代码执行后打印出来的结果是：

想必大部分小伙伴都觉得很简单。

2.从上面的实例可以看到redux的核心内容就是：

  A.createStore方法以及执行之后返回的store对象，定义在store对象上的store.subscribe()监听某个函数,store.getState()获取当前store中state(一个复杂的对象)的值，store.dispatch()推送某个action

  B.combineReducers将多个reducer合并成一个rootReducer,本质上为合并对象，并返回一个新的总的的reducer函数

2.1 createStore 方法简介

     createStore方法内部根据传入的三个参数(reducer、初始状态、增强者)，在内部创建了几个核心函数，然后把这几个函数放到一个对象里面返回，也就是我们示例代码中常用到的store对象

export default function createStore(reducer, preloadedState, enhancer) {
      function getState() {}
      function subscribe(listener) {}
      function dispatch(action) {}
      function replaceReducer(nextReducer) {}
      ...
      return {
          dispatch,
          subscribe,
          getState,
          replaceReducer,
          ...
     }

}

2.1.1  subscribe方法的核心代码，就是把一个一个的监听函数放入到Listeners的数组,然后返回一个unsubscribe函数，一个闭包函数，包含着传入的listeners函数，执行该函数从监听数组中移除该listeners

function subscribe(listener) {
    if (typeof listener !== 'function') {
        throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
        if (!isSubscribed) {
            return
        }

        isSubscribed = false

        ensureCanMutateNextListeners()
        const index = nextListeners.indexOf(listener)
        nextListeners.splice(index, 1)
    }
}

2.1.2  getState 直接返回当前的state的值，如果没有进行任何操作，直接返回默认值，如果是经过dispatch(action)之后，在dispatch中触发了reducer函数，生成了新的state,也是直接返回

function getState() {
    return currentState
}

2.1.3 dispatch store上的最核心方法, 两部分组成，第一部分直接把当前的state和传入的action直接传入reducer函数，执行，生成新的state,供getState使用，第二部分是直接循环执行subscribe中添加到listeners数组中的监听函数，也就是触发监听函数，

逻辑非常简单。

function dispatch(action) {
    try {
        isDispatching = true
        currentState = currentReducer(currentState, action)
    } finally {
        isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
        const listener = listeners[i]
        listener()
    }

    return action
}

2.2  combineReducers，将多个reducer合并成一个rootReducer,本质上为合并对象，并返回一个新的总的的reducer函数

function combineReducers(reducers) {
    const reducerKeys = Object.keys(reducers)
    const finalReducers = {}
    for (let i = 0; i < reducerKeys.length; i++) {
        const key = reducerKeys[i]
        if (typeof reducers[key] === 'function') {
            finalReducers[key] = reducers[key]
        }
    }
    const finalReducerKeys = Object.keys(finalReducers)
    return function combination(state = {}, action) {
        let hasChanged = false
        const nextState = {}
        for (let i = 0; i < finalReducerKeys.length; i++) {
            const key = finalReducerKeys[i]
            const reducer = finalReducers[key]
            const previousStateForKey = state[key]
            const nextStateForKey = reducer(previousStateForKey, action)
            if (typeof nextStateForKey === 'undefined') {
                const errorMessage = getUndefinedStateErrorMessage(key, action)
                throw new Error(errorMessage)
            }
            nextState[key] = nextStateForKey
            hasChanged = hasChanged || nextStateForKey !== previousStateForKey
        }
        return hasChanged ? nextState : state
    }
}

combineReducers的一个简单实现方式，更能明白其中的工作原理：

const combineReducers = (reducers) => {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce(
      (nextState, key) => {
        nextState[key] = reducers[key](
          state[key],
          action);
        return nextState;
      },
      {})
  }
}

2.3 applyMiddleware 中间件，对dispatch的增强，一般为添加异步操作等,例如redux-thunk中间件，实际上就是如果action是个方法，则执行这个方法，如果不是则正常dispatch(action)

function applyMiddleware(...middlewares) {
    return (createStore) => (reducer, preloadedState, enhancer) => {
        const store = createStore(reducer, preloadedState, enhancer)
        let dispatch = store.dispatch
        let chain = []

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

        return {
            ...store,
            dispatch
        }
    }
}

function createThunkMiddleware(extraArgument) {
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }

        return next(action);
    };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

3.react-redux

3.1通过provider 提供store,react通过Context属性，可以将props直接给子孙component,无须通过props层层传递，Provider仅仅起到获得store, 然后将其传递给子孙元素而已

3.2 connect  这个是最关键的方法,

connect 是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps,然后返回一个生产Component的函数(高阶组件HOC),然后再将真正的component作为参数传给这个函数，这样就生产了一个经过包裹的connect组件，该组件具有以下特点：

    通过this.context获取祖先component的store

    props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component

    componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互

    shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState

    componentWillUnmount时移除注册的事件this.handleChange