redux原理解析

[su6838354]

redux 接口分析

• createStore 创建并初始化整个redux数据管理中心，返回 dispatch,getState,replaceReducer,subscribe等几个方法

• dispatch 是一个核心方法，用于发送action，同步采用currentReducer处理action，并执行subscribe订阅的listener；里面会check 不能在reducer中执行dispatch

• dispatch源码

  
  function dispatch(action) {
  if (!isPlainObject(action)) {
    throw new Error(
      'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
    )
  }
  
  if (typeof action.type === 'undefined') {
    throw new Error(
      'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
    )
  }
  
  if (isDispatching) {
    throw new Error('Reducers may not dispatch actions.')
  }
  
  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
  }

- dispatch 发出的action分 同步和异步，同步action是纯函数方式处理数据；异步action会拆分成多个子action；

- combineReducer 用户合并多个Reducer到finalReducer中并返回combination；
在执行dispatch的时候，会直接执行combination(currentState, action)，其实就是遍历finalReducer中每个switch，所以多个reducer中有重复的switch也会重复执行；
执行后确保当前对应的key的state修改了，否则等于没修改，所以一般 return {...state, ...changeState}

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

#### 处理异步action的几种套路
  - 自己写个中间件，一个action 拆分成多个action
  - 采用redux-thunk中间件，判断dispatch的action是一个方法的时候，直接执行action()
  - 采用redux-saga，

#### redux 中间件
其实就是重写了dispatch方法，用函数包裹dispatch；
多个中间件，就用reduce来实现链式包含，返回新的function

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

定义一个中间件， 三级高阶函数， store接口->下一个函数->最后的action

- redux-thunk 源码

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;

[su6838354]

Redux原理（一）：Store实现分析 https://www.cnblogs.com/hhhyaaon/p/5860159.html

react-redux原理分析 http://www.cnblogs.com/hhhyaaon/p/5863408.html

[su6838354]

解读redux工作原理 https://segmentfault.com/a/1190000004236064#articleHeader13

[su6838354]

react-redux

Provider 是为connect 提供store接口用的

• Provider 作为一个顶层组件，接收Redux的store作为props，通过context对象传递给子孙组件上的connect；

• connect 连接组件和redux 有一个Connect组件，获取Provide 提供的store，从而获取state

• react 响应store变化 store作为数据仓库，本身不是组件的state，更新后不会触发组件更新；

dispatch 本身 会做两件很重要的事情：

1. 执行reducer获取新数据，这个数据其实就是在store中的（store中的数据不是放在state中）
2. 执行listeners，就是在redux中订阅的函数

在Connect包裹组件的时候，会在Connect.componentDidMount 的方法里面调用 redux的subcribe接口，注入onStateChange方法

dispatch的调用--->reducers处理----->listeners执行------->onStateChange执行------>setState({})