一.目录分析

1.src

项目的源代码,包括以下几个文件:

  • index.js

整个redux框架的入口文件 作用: 导出redux的几大函数包括createStore,bindActionCreators,combineReducers,compose,applyMiddleware

  • createStore.js

创建应用唯一的state树

  • bindActionCreators.js

工具类函数 作用: 方便开发者将dispatch和actioncreator当props绑定到组件中

  • combineReducers.js

将多个reducer,合并成一个reducer,传入到createStore函数中

  • compose.js

将多个函数组合执行

  • applyMiddleware

工具类函数 作用: 将中间件如redux-thunk应用到createStore函数上

  • util/warning.js

自定义的错误信息提示函数

2.docs

redux的文档. 官方网站:www.redux.js.org 中文翻译:cn.redux.js.org

3.build

构建redux所需要的一些文件

4.examples

redux的使用案例,从简单的原生counter到复杂到真实场景的应用,都提供了案例参考

5.test

测试文件目录

6.node_modules

redux源码所依赖的node包


源码分析

1.src/index.js

  • 关键词

源代码使用了es6语法,使用import从文件中导出es6模块 import用法

  • 源码解读

    1.导出redux的各个主要模块导出redux的各个主要模块

       // 绑定reducer和state的关系
       import createStore from './createStore'
       // 导出警告函数
       import warning from './utils/warning'
       // 导出自动绑定函数 自动绑定函数,主要生成dispatch(actionCreator(action));
       import bindActionCreators from './bindActionCreators'
       // 导出应用中间件函数,中间件主要作用是将发往reducer的action进行多次修改
       import applyMiddleware from './applyMiddleware'
       /* 合并多个reducer,这样方便每个reducer只处理store的某一个部分数据,最后通过
       * combineReducers函数合并
       */
       import combineReducers from './combineReducers'
       // 将多个函数合并在一起
       import compose from './compose'
  

2.在开发环境下使用压缩版本给予警告

      function isCrushed() {}
       if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' 
        && isCrushed.name !=='isCrushed') {
           warning(
            'You are currently using minified code outside of NODE_ENV === \'production\'. ' +
            'This means that you are running a slower development build of Redux. ' +
            'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' +
            'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' +
            'to ensure you have the correct code for your production build.'
            )
       }
    

3.导出多个对象

      export {
          createStore,
          compose,
          warning,
          combineReducers,
          bindActionCreators
      }
    

2.src/utils/warning.js

  • 关键词
  1. export default
  2. javascript中异常处理
  3. javascript中错误处理
  4. 阮一峰谈javascript错误处理
  • 源码解读

    1.判定console.error是否存在且可用

    // 导出warning函数
    export default function warning(message) {
        // 判断console.error函数是否存在且可用
        if (typeof console !== 'undefined' && typeof console.error == 'function') {
            console.error(message);
        }

    }
  

2.捕获异常并处理

    try {
        // 抛出异常
        throw new Error(Message)
    } catch(e) {
        // 捕获异常
    }
    

redux从入门到进阶

初学者

学习步骤:1. 阅读redux的官方文档 2.通过一些小例子熟悉redux的思想 3.复杂案例应用 4.熟悉redux的源码 5.熟悉业界关于redux的最佳实践

  1. redux offical site
  2. Redux系列01:从一个简单例子了解action、store、reducer
  3. Redux系列02:一个炒鸡简单的react+redux例子

Pratice

关于redux的实战经验

  1. Redux 在实践中的一些问题及思考
  2. React和Redux的连接react-redux
  3. 对Redux实践中数据请求的一些想法
  4. Redux系列x:源码解析