微信小程序集成 Redux

時間 2019-11-05

標籤微信程序集成 redux 简体版

原文原文鏈接

示例

先展現成果javascript

Redux是什麼

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。前端

Redux官方文檔java

爲何要使用Redux

小程序儼然是一個相似Hybrid App的東西，前面是SPA，小程序提供一些原生功能的接口。react

如今前端程序規模都比較大，頁面狀態，數據緩存，須要管理的東西太多。引入Redux能夠方便的管理這些狀態。而且Redux豐富的周邊工具也是頗有吸引力的。webpack

集成Redux

小程序的模塊化

微信的文檔並無指出如何使用第三方庫，因此只能從微信小程序的模塊化入手。git

文檔中提到，模塊化的關鍵是：github

module.exports = function(){}

同時，若是咱們去觀察小程序開發環境的network面板，點擊任何一個js，咱們能夠發現：web

項目目錄中的全部js文件都會自動被加載，不管咱們是否在代碼中requireshell
因此的模塊都會被套上下面的代碼：npm

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過的。
微調加載方式：用編輯器打開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。

集成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了