微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

微信小程序中使用redux

当然小程序中使用redux不是必须的,如果你的程序逻辑不是很复杂,无需用这个东西,redux就是管理全局状态的,如果你刚好很熟悉redux,并且很有必要使用这东西的话,那就非常好可以使用,作者集成插件微信小程序中的思路方法,很值得学习。

微信小程序中使用redux" src="http://www.jb51.cc/res/2017/08-11/13/d53fa4bd689e7b175cae0a5d8072cd0c.gif" style="border: none; vertical-align: top; max-width: 100%; display: block; margin: 10px 0px; width: auto !important; height: auto !important;"/>

Redux是什么

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

为什么要使用Redux

小程序俨然是一个类似Hybrid App的东西,前面是SPA,小程序提供一些原生功能的接口。

现在前端程序规模都比较大,页面状态,数据缓存,需要管理的东西太多。引入Redux可以方便的管理这些状态。并且Redux丰富的周边工具也是很有吸引力的。

集成Redux

小程序的模块化

微信的文档并没有指出如何使用第三方库,所以只能从微信小程序的模块化入手。

文档中提到,模块化的关键是:

同时,如果我们去观察小程序开发环境的network面板,点击任何一个js,我们可以发现:

    项目目录中的所有js文件都会自动被加载,无论我们是否在代码中require

  1. 所以的模块都会被套上下面的代码:

define("reducers/visibilityFilter.js",
function(require, module) {
var window = {
Math: Math
}
/*兼容babel*/
,
location,
document,
navigator,
self,
localStorage,
history,
Caches;

/********************/
/******你写的代码******/
/********************/

})

这实际上是类似的加载方式,但是跟标准的AMD又有些不同,缺少了依赖部分的声明。

function(require, module){}: 这个函数包裹的是模块的实现,也就是我们自己写的代码小程序给我们暴露了两个参数require和module,require用来在模块中加载其他模块,module用来将模块中的方法暴露出去:

rush:js;toolbar:false;">module.exports = function(){}

所以只要需要让第三方库的代码使用这种形式的export就可以了。

构建Redux微信小程序

这里主要目标是打一个Redux包,让它可以兼容微信小城的加载方式

下载Redux代码到本地

git clone https://github.com/reactjs/redux.git

安装依赖

npm install

打包

npm run build:umd && npm run build:umd

这些命令的详细内容可以到redux项目的package.json中查看。

这些命令是是使用webpack构建UMD模式的包。也就是说所有的代码包括依赖的库都会被打包到一个文件中,并且自带一段模块加载代码文件可以在dist目录下找到。

带min.js后缀的是minify过的。

微调加载方式:用编辑器打开dist目录下的redux.js文件

(function webpackUniversalModuleDeFinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object')
 module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["Redux"] = factory();
else
root["Redux"] = factory();
})(this, function() {
...
})

这样修改的原因是,在微信小程序的环境中是没有exports变量的,所以就没办法正确进入这个分支,删除之后就可以正确进入了

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。