资讯专栏INFORMATION COLUMN

redux源码阅读--主模块

testHs / 1691人阅读

摘要:主模块的入口模块就是。主要就做两件事引入个功能模块,并挂载至同一个对象上,对外暴露。在非环境下压缩代码,给予警告。后续的源码解读和测试例子可以关注源码解读仓库

主模块

redux的入口模块就是src/index.js。这个文件的代码十分简单。主要就做两件事:

引入个功能模块,并挂载至同一个对象上,对外暴露。

在非production环境下压缩代码,给予警告。

下面是模块的源码(只包含自己对代码的理解,并不包含原注释。)

// 引入createStore模块,这个模块就是`createStore`方法的实现
import createStore from "./createStore"
// 引入combineReducers模块,这个模块就是`combineReducers`方法的实现
import combineReducers from "./combineReducers"
// 引入bindActionCreators模块,这个模块就是`bindActionCreators`方法的实现
import bindActionCreators from "./bindActionCreators"
// 引入applyMiddleware模块,这个模块就是`applyMiddleware`方法的实现
import applyMiddleware from "./applyMiddleware"
// 引入compose模块,这个模块就是`compose`方法的实现
import compose from "./compose"
// warning在支持console对象的浏览器中可以看作是对console.error方法的一个便捷方法,否则就是一个Error的实例对象。
import warning from "./utils/warning"

// 这个函数唯一的作用就是:判断代码是不是处于压缩模式下,如果代码处于压缩模式下,函数的名称会改变,即
// isCrushed.name === "isCrushed" 为false
function isCrushed() {}

// 如果在非production模式下压缩我们的js代码,会抛出warning。
// if的判断条件其实就是告诉我们,在production的模式下,一定要设置process.env.NODE_ENV为production
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."
  )
}

// 这就是我们通常使用的redux的几个常用的方法
export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose
}

怎么设置环境变量NODE_ENV的值呢?对于我们使用webpack进行开发的同学来说,我们可以通过如下方式设置。

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  })
]

其中,JSON.stringify(process.env.NODE_ENV)是直接获取的我们bash终端而言的。所以,在运行我们的项目之前,我们必须确保制定了这个环境变量(注:NODE_ENV并不是不可变的,你也可以指定其他的名字,但是需要和自己项目中的获取保持一致)

假设我们项目的启动脚本是yarn run start

Mac or Linux

可以通过下面两种方式设置:

export NODE_ENV=production
yarn run start

# 或者

NODE_ENV=production yarn run start

Windows

可以通过下面这种方式指定:

set NODE_ENV=production yarn run start

这就是对redux源码主模块的一个整体解读,水平有限,欢迎拍砖。后续的源码解读和测试例子可以关注:redux源码解读仓库

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89455.html

相关文章

  • redux源码阅读--基本概括

    摘要:总体概括是官方推荐的一个状态管理库。功能强大且代码优雅。在阅读源码的过程中可以看出,其只依赖这两个库的某几个方法。从这里来看,可以看作是无依赖的一个库。这就是对源码的整体概括,水平有限,欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 Redux总体概括 redux是react官方推荐的一个状态管理库。功能强大且代码优雅。从package.json文件中: dependencie...

    lauren_liuling 评论0 收藏0
  • FCC 成都社区·技术周刊 第 13 期

    摘要:前端支持同域才能发送本月初,浏览器发布。所谓攻击,就是使用真实的进行恶意行为。链接发布此次发布亮点包括类型以及对和映射对象类型中的符号和数字文字的支持。但直到看到了,总算觉得社区又进了一步。微信已将对弈源码和训练好的模型开源。 【前端】 1、Firefox 60 支持同域才能发送 Cookie 本月初,Firefox 60 浏览器发布。它有一个很大的亮点,就是它解决了 CSRF 攻击。...

    Seay 评论0 收藏0
  • FCC 成都社区·技术周刊 第 13 期

    摘要:前端支持同域才能发送本月初,浏览器发布。所谓攻击,就是使用真实的进行恶意行为。链接发布此次发布亮点包括类型以及对和映射对象类型中的符号和数字文字的支持。但直到看到了,总算觉得社区又进了一步。微信已将对弈源码和训练好的模型开源。 【前端】 1、Firefox 60 支持同域才能发送 Cookie 本月初,Firefox 60 浏览器发布。它有一个很大的亮点,就是它解决了 CSRF 攻击。...

    chnmagnus 评论0 收藏0
  • FCC 成都社区·技术周刊 第 13 期

    摘要:前端支持同域才能发送本月初,浏览器发布。所谓攻击,就是使用真实的进行恶意行为。链接发布此次发布亮点包括类型以及对和映射对象类型中的符号和数字文字的支持。但直到看到了,总算觉得社区又进了一步。微信已将对弈源码和训练好的模型开源。 【前端】 1、Firefox 60 支持同域才能发送 Cookie 本月初,Firefox 60 浏览器发布。它有一个很大的亮点,就是它解决了 CSRF 攻击。...

    wuyangchun 评论0 收藏0

发表评论

0条评论

testHs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<