写在前面：
新手学习，不喜轻喷。

1.个人初解

redux将整个应用的state存储树级机构的object中，树级结构的顶点为唯一Store，在应用的整个生命周期内，只会存在一个Store。
store中存放state，要修改store中的state必须通过action来触发，使用reducer里面的函数对state修改，个人觉得有点类似于函数式编程。

2.数据流向

2.1.redux是严格的单向数据流

即：view触发action，reducer接收action修改store中的state，view根据判断，重新渲染。

redux.png

2.2.同一个action得到的新的state数据值一定是相等的

reducer是纯函数，只是用来计算下一个state，函数结果是可以预测的，相同的输入，相同的输出，不应该有副作用。

3.redux在运行过程中到底做了什么事情

3.1. redux/src/index.js redux的入口文件

先看一段redux入口源码

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'
import __DO_NOT_USE__ActionTypes from './utils/actionTypes' //redux自带的action类型

/*
 * This is a dummy function to check if the function name has been altered by minification.
 * If the function has been minified and NODE_ENV !== 'production', warn the user.
 * 判断在非生产环境下，redux代码是否被压缩，使用function.name来进行判断，无实际意义和方法体
 */
function isCrushed() {}

if (
  process.env.NODE_ENV !== 'production' && //当前环境不是生产环境
  typeof isCrushed.name === 'string' && //方法名称是String类型，IE不支持Function.name
  isCrushed.name !== 'isCrushed' //当代码被编译压缩之后，方法名称会改变，该判断标识当前没有被编译和压缩
) {
  warning(
    '您当前正在使用node_env==“production”之外的缩小代码。 ' +
    '这意味着您正在运行一个较慢的redux开发版本。' +
    '你可以使用loose envify（https://github.com/zertosh/loose-envify）来浏览 ' +
    '或在webpack中设置生产模式（https://webpack.js.org/concepts/mode/）' +
    '以确保生产版本的代码正确。'
  )
}

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes //语义：不要使用ActionTypes
}

该文件主要导出变量和检查当前环境下是否有压缩代码，redux压缩之后，运行性能会有所降低。

关于代码压缩简单理解：
未压缩
function isCrushed() {}
if (
process.env.NODE_ENV !== 'production' &&
typeof isCrushed.name === 'string' &&
isCrushed.name !== 'isCrushed'
)
压缩之后，方法名称会改变，所以等式成立
function d(){}"string"==typeof d.name&&"isCrushed"!==d.name

3.2.redux/src/createStore

createStore(reducer:any,preloadedState?:any,enhancer?:middleware),最终返回一个实例。可以进行， 监听和 派发。

看一段代码：

/**
*创建保存状态树的redux存储。
*更改存储区中数据的唯一方法是对其调用“dispatch（）”。
*
*你的应用中应该只有一个store。指定不同的
*部分状态树响应操作，可以组合多个还原器
*通过使用“combinereducers”将其转换为单个reducer函数。
*
*@param{function}reducer返回下一个状态树的函数，给定
*当前状态树和要处理的操作。
*
*@param{any}[preloadedstate]初始状态。您可以选择指定它
*在通用应用程序中对服务器的状态进行优化，或恢复
*以前序列化的用户会话。
*如果使用'combinereducers'生成根还原函数，则必须
*与“combinereducers”键形状相同的对象。
*
*@param{function}[enhancer]存储增强器。您可以选择指定它
*为了增强store的第三方功能，如中间件，
*时间旅行、坚持等。redux附带的唯一存储增强功能
*是“applymiddleware（）”。
*
*@return{store}一个redux存储，用于读取状态、分派操作
*并订阅更改。
*/
export default function createStore(reducer, preloadedState, enhancer) {
if (
    (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
    (typeof enhancer === 'function' && typeof arguments[3] === 'function')
  ) {
    throw new Error(
      'It looks like you are passing several store enhancers to ' +
        'createStore(). This is not supported. Instead, compose them ' +
        'together to a single function.'
    )
  }
  
  //检查增强器
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }
  //增强器只能是函数
  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    //返回增强后的store
    return enhancer(createStore)(reducer, preloadedState)
  }
  //reducer也只能是函数
  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }
}

enhancer?:middle,增强器，若干个中间件可以通过applymiddleware产生一个增强器，增强器通过Compose函数合并成一个增强器。
applymiddleware代码如下：

export default function applyMiddleware(...middlewares) {
    // 接受若干个中间件参数
   // 返回一个enhancer增强器函数，enhancer的参数是一个createStore函数。等待被enhancer(createStore)
  return createStore => (...args) => {
    // 先创建store或者更新Store
    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.'
      )
    }
    //暂时存储更新前的Store
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    //遍历中间件，将更新前的Store传入，获取更新后的tore数组
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    //组合中间件，将dispatch传入，即每个中间件都有一个增强后的dispatch
    dispatch = compose(...chain)(store.dispatch)
    //返回一个store和dispatch，即：返回实现了中间件的store增强器
    return {
      ...store,
      dispatch
    }
  }
}

调用逻辑：
1.通过createStore方法创建出一个store
2.定一个dispatch，如果在中间件构造过程中调用，抛出错误提示
3.定义middlewareAPI，有两个方法，一个是getState，另一个是dispatch，将其作为中间件调用的store的桥接
4.middlewares调用Array.prototype.map进行改造，存放在chain
5.用compose整合chain数组，并赋值给dispatch
6.将新的dispatch替换原先的store.dispatch

compose代码如下：

export default 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)))
}

compose接收>0个的增强器，如果没有增强器，就返回一个空函数，如果有一个函数，返回函数本身，如果是多个，才会产生合并的过程即compose的过程，最后一行，通过迭代器生成组合迭代函数。
看到这里，很懵逼有没有？有没有？

6af89bc8gw1f8rntaeadij20hs0hsgm7.jpg

redux-thunk、redux-saga都是redux常用的中间件，一般配合applyMiddleware使用，applyMiddleware的作用就是将这些enhancer格式化成redux想要的enhancer，以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;

根据源码来看，我们如果单独使用thunk，应该如下：

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

applyMiddleware处理之后，应该是china数组如下：

const newDispatch;
const middlewareAPI={
  getState:store.getState,
  dispatch: (...args) => newDispatch(...args)
}
const { dispatch, getState } = middlewareAPI;
const  fun1 = (next)=>{
  return action => {
    if (typeof action === 'function') {
        return action(dispatch, getState);
    }
    return next(action);
  }
}
const chain = [fun1]

模拟整个过程：

function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}
// store.dispatch就等价于newDispatch
store.dispatch(makeASandwichWithSecretSauce('Me'))

====> 转换
const forPerson = 'Me';
const action = (dispatch)=>{
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
}
newDispatch()

===> typeof action === 'function' 成立时

 ((dispatch)=>{
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  })( (...args) => newDispatch(...args), getState)

====> 计算运行结果
const forPerson = 'Me';
const dispatch = (...args) => newDispatch(...args) ；
fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
);
// 其中：
function fetchSecretSauce() {
  return fetch('https://www.google.com/search?q=secret+sauce');
}
function makeASandwich(forPerson, secretSauce) {
  return {
    type: 'MAKE_SANDWICH',
    forPerson,
    secretSauce
  };
}

function apologize(fromPerson, toPerson, error) {
  return {
    type: 'APOLOGIZE',
    fromPerson,
    toPerson,
    error
  };
}
====> 我们这里只计算Promise.resolve的结果,并且假设fetchSecretSauce返回值为'666',即sauce='666'

const forPerson = 'Me';
const dispatch = (...args) => newDispatch(...args) ；
dispatch({
    type: 'MAKE_SANDWICH',
    'Me',
    '666'
})
====> 为了方便对比，我们再次转换一下

const action = {
    type: 'MAKE_SANDWICH',
    'Me',
    '666'
};

const next = store.dispatch

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

newDispatch(action)

====> 最终结果
store.dispatch({
    type: 'MAKE_SANDWICH',
    'Me',
    '666'
});