Redux随笔

参考：https://zhuanlan.zhihu.com/p/20597452

// 应用状态初始状态值
const initialState = {
  count: 0
}

// 创建一个“reducer”函数来确定应用程序中发生某些事情时的新状态
function reducer(state = initialState, action) {
  // Reducers 通常会查看发生的action 的 type 来决定如何更新状态
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      // 如果 reducer 不关心这个action type，原样返回现有状态
      return state
  }
}

// 如果存在多个reducer，需要合并处理
// const combineReducer = Redux.combineReducers({ reducer });
// var store = Redux.createStore(combineReducer);

// 3. 创建 store 对象
var store = Redux.createStore(reducer);

// 4. 定义 action
var increment = { type: "increment" };
var decrement = { type: "decrement" };

// 5. 获取按钮 给按钮添加点击事件
document.getElementById("plus").onclick = function () {
    // 6. 触发action
    store.dispatch(increment);
};

document.getElementById("minus").onclick = function () {
    // 6. 触发action
    store.dispatch(decrement);
};

// 7. 订阅 store
store.subscribe(() => {
    // console.log(store.getState().reducer.count); // 合并多个reducer

    // 获取store对象中存储的状态
    // console.log(store.getState());
    document.getElementById("count").innerHTML = store.getState().count;
});

function createStore(reducer, preloadedState, enhancer) {
  // ... 省略
  
    function dispatch(){}
    function subscribe(){}
    function replaceReducer(){}
    function getState(){}
    function observable(){}

    dispatch({ type: ActionTypes.INIT })   // 默认会发起一次

    return {
        dispatch,
        subscribe,
        replaceReducer,
        getState,
        [$$observable]: observable,
    }  
} 

function dispatch(action) {
    // ... 省略

    try{
        isDispatching = true
        // currentState是preloadedState
        currentState = currentReducer(currentState, action)
    }finally{
        isDispatching = false
    }
    
    // nextListeners 是 subscribe 发布的回调函数，每执行dispatch就会执行
    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
        const listener = listeners[i]
        listener()
    }
    
    return action
}

function replaceReducer(nextReducer) {
    // ... 省略

    currentReducer = nextReducer    // reducer 替换成新的了

    dispatch({ type: ActionTypes.REPLACE })
}

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)

    // This is used to make sure we don't warn about the same
    // keys multiple times.
    let unexpectedKeyCache

    let shapeAssertionError
    try{
        assertReducerShape(finalReducers)    // 验证reducers是否正常返回结果
    } catch (e) {
        shapeAssertionError = e
    }

    return function combination(state = {}, action) {
        // ... 省略
    }
}

function combination(state = {}, action) {
    if (shapeAssertionError) {
        throw shapeAssertionError
    }

    // .. 省略

    let hasChanged = false
    const nextState = {}
    // 遍历执行每个reducer
    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)
      
        // ... 省略
        nextState[key] = nextStateForKey
        hasChanged = hasChanged || nextStateForKey !== previousStateForKey
        }
        hasChanged =
        hasChanged || finalReducerKeys.length !== Object.keys(state).length
        return hasChanged ? nextState : state
}    

function bindActionCreator(actionCreator, dispatch) {
    return function() {
        return dispatch(actionCreator.apply(this, arguments))
    }
}

function bindActionCreators(actionCreators, dispatch) {
    if (typeof actionCreators === 'function') {
        return bindActionCreator(actionCreators, dispatch)
    }
    
    // ...省略

    // 传入对象
    const boundActionCreators = {}
    for (const key in actionCreators) {
        const actionCreator = actionCreators[key]
        if (typeof actionCreator === 'function') {
            boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
        }
    }

    return boundActionCreators
}

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 => (...args) => {
        const store = createStore(...args)
        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: (...args) => dispatch(...args)
        }

        const chain = middlewares.map(middleware => middleware(middlewareAPI))
        dispatch = compose(...chain)(store.dispatch)

        return {
            ...store,
            dispatch
        }
    } 
}

const chain = middlewares.map(middleware => middleware(middlewareAPI)) // 重写dispatch dispatch = middleware(middleware(middleware(store.dispatch))) dispatch = compose(...chain)(store.dispatch)