微信小程序技术教程：集成 Redux

示例

Redux就是什么

Redux 就是 JavaScript 状态容器，提供更多可以预测化后的状态管理。

Redux官方文档

为什么必须采用Redux

小程序摇身一变就是一个相似Hybrid App的东西，前面就是SPA，小程序提供更多一些原生功能的USB。

现在前端程序规模都比较小，页面状态，数据内存，须要管理的东西太多。导入Redux可以便利的管理这些状态。并且Redux多样的周边工具也就是很有吸引力的。

内置Redux

小程序的模块化

微信的文档并没表示如何采用第三方库，所以就可以从微信小程序的模块化抓起。

文档中提及，模块化的关键就是：module.exports = function(){}

同时，如果我们回去观测小程序开发环境的network面板，页面任何一个js，我们可以辨认出：

项目目录中的所有js文件都会自动被读取，无论我们与否在代码中require

所以的模块都会套牢上下面的代码：

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纸盒，使它可以相容微信小城的读取方式

浏览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过的。

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变量的，所以就没有办法恰当步入这个分支，删掉之后就可以恰当步入了

拷贝入工程目录

比如，我们拷贝到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

加装remote-redux-devtools

原版的remote-redux-devtools采用的一个websocket的倚赖可以采用原生的WebSocket，小程序就是不积极支持的，所以须要换成小程序的websocket同时实现。

修正不好的黏在这里：remote-redux-devtools

把代码浏览至工程目录里面就可以用了。

加装和启动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