微信小程序集成 Redux

示例

先展现成果

Redux是什么

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

Redux官方文档

为何要使用Redux

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

如今前端程序规模都比较大，页面状态，数据缓存，须要管理的东西太多。引入Redux能够方便的管理这些状态。而且Redux丰富的周边工具也是颇有吸引力的。

集成Redux

小程序的模块化

微信的文档并无指出如何使用第三方库，因此只能从微信小程序的模块化入手。

文档中提到，模块化的关键是：

module.exports = function(){}

同时，若是咱们去观察小程序开发环境的network面板，点击任何一个js，咱们能够发现：

1. 项目目录中的全部js文件都会自动被加载，不管咱们是否在代码中require

2. 因此的模块都会被套上下面的代码：

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

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

})

这其实是相似AMD的加载方式，可是跟标准的AMD又有些不一样，缺乏了依赖部分的声明。

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

module.exports = function(){}

因此只要须要让第三方库的代码使用这种形式的export就能够了。

构建Redux的微信小程序包

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

1. 下载Redux的代码到本地

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

2. 安装依赖

   npm install

3. 打包

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

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

   • 这些命令是是使用webpack构建UMD模式的包。也就是说全部的代码，包括依赖的库都会被打包到一个文件中，而且自带一段模块加载代码，文件能够在dist目录下找到。

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

4. 微调加载方式：用编辑器打开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() {
   ...  
   })

   • 这段代码是用来加载模块的，里面的factory函数的返回的内容是用webpack提供的loader组织起来的redux的代码和第三方依赖。

   • 若是咱们把这个文件拷贝到小程序中，只须要让程序能正常进入第三行代码，就能把Redux加载进来。

   • 将第二行代码：

     if(typeof exports === 'object' && typeof module === 'object')

     修改为：

     if(typeof module === 'object')

   这样修改的缘由是，在微信小程序的环境中是没有exports变量的，因此就没办法正确进入这个分支，删除以后就能够正确进入了

5. 拷贝进工程目录
   例如，咱们拷贝到libs目录下，那么咱们在程序中使用时，只要当作是一个本地模块去require就能够了：

   var redux = require('./libs/redux.js')

经过这里的示例，其实咱们发现，咱们能够经过相似的方法，使用Webpack打包第三方库，就能够集成任何库了。

使用Redux

咱们可使用Redux的微信小程序绑定库来简化一些代码：wechat-weapp-redux，

详细的安装和使用说明能够参照wechat-weapp-redux的README

集成Redux-devtools

若是没有redux-devtools那么使用redux的效果多是要减半的。

由于微信小程序的开发环境是定制的，暂时没有发现办法直接安装redux-devtool的插件。

这里使用remote-redux-devtools，remotedev-server

1. 安装remote-redux-devtools

   • 原版的remote-redux-devtools使用的一个websocket的依赖会使用原生的WebSocket，小程序是不支持的，因此须要改为小程序的websocket实现。

   • 修改好的包在这里：remote-redux-devtools

   • 把代码下载到工程目录里面就能够用了。

2. 安装和启动remotedev-server

   npm install -g remotedev-server
   remotedev --hostname=localhost --port=5678

   由于没办法用npm安装到本地（开头提到的，微信小程序会尝试去加载项目目录中的全部js），因此这里使用全局安装，第二条命令是启动remotedev-server，hostname和port分别指定为localhost和5678。

3. 集成devtool

   const {createStore, compose} = require('./libs/redux.js');
   const devTools = require('./libs/remote-redux-devtools.js').default;
   const reducer = require('./reducers/index.js')
   
   function configureStore() {
     return createStore(reducer, compose(devTools({
       hostname: 'localhost',
       port: 5678,
       secure: false
     })));
   }
   
   module.exports = configureStore;

   把devtool使用redux的compose加到store中去。hostname和port是指定为以前启动remotedev-server启动时候指定的参数。保存以后重启一下小程序，若是没有报错的话就OK了

4. 打开监视器
   能够在浏览器中访问localhost:5678，这是remotedev-server自带的监视器，正常打开的话是这样的：
   
   左边有一个@@INIT说明小程序的redux链接成功了。可是这里这个自带的监视器可能打不开，由于它的一些js包是存在国外的cdn上的，偶尔访问不到。

这个时候可使用http://remotedev.io/local/，点击下面的setting，设置使用本地的server。保存以后刷新页面，应该跟上面显示的结果同样。

示例

详细的代码示例，能够参照：wechat-weapp-redux-todos