ずっと好きだった资源,国产欧美日产久久

首頁 > 小程序資訊 > 小程序常見問題

微信小程序技術(shù)教程：集成 Redux

時(shí)間：2020-07-15 10:36:30

示例

Redux是什么

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。

Redux官方文檔

為什么要使用Redux

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

現(xiàn)在前端程序規(guī)模都比較大，頁面狀態(tài)，數(shù)據(jù)緩存，需要管理的東西太多。引入Redux可以方便的管理這些狀態(tài)。并且Redux豐富的周邊工具也是很有吸引力的。

集成Redux

小程序的模塊化

微信的文檔并沒有指出如何使用第三方庫，所以只能從微信小程序的模塊化入手。

文檔中提到，模塊化的關(guān)鍵是：module.exports = function(){}

同時(shí)，如果我們?nèi)ビ^察小程序開發(fā)環(huán)境的network面板，點(diǎn)擊任何一個(gè)js，我們可以發(fā)現(xiàn)：

項(xiàng)目目錄中的所有js文件都會(huì)自動(dòng)被加載，無論我們是否在代碼中require
所以的模塊都會(huì)被套上下面的代碼：

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

/*******************/

/******你寫的代碼******/

/********************/

})

這實(shí)際上是類似AMD的加載方式，但是跟標(biāo)準(zhǔn)的AMD又有些不同，缺少了依賴部分的聲明。

function(require, module){}: 這個(gè)函數(shù)包裹的是模塊的實(shí)現(xiàn)，也就是我們自己寫的代碼，小程序給我們暴露了兩個(gè)參數(shù)require和module，require用來在模塊中加載其他模塊，module用來將模塊中的方法暴露出去：

module.exports = function(){}

所以只要需要讓第三方庫的代碼使用這種形式的export就可以了。

構(gòu)建Redux的微信小程序包

這里主要目標(biāo)是打一個(gè)Redux包，讓它可以兼容微信小城的加載方式

下載Redux的代碼到本地：git clone https://github.com/reactjs/redux.git
安裝依賴：npm install
打包：npm run build:umd && npm run build:umd

這些命令的詳細(xì)內(nèi)容可以到redux項(xiàng)目的package.json中查看。
這些命令是是使用webpack構(gòu)建UMD模式的包。也就是說所有的代碼，包括依賴的庫都會(huì)被打包到一個(gè)文件中，并且自帶一段模塊加載代碼，文件可以在dist目錄下找到。
帶min.js后綴的是minify過的。

4.微調(diào)加載方式：用編輯器打開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函數(shù)的返回的內(nèi)容是用webpack提供的loader組織起來的redux的代碼和第三方依賴。
如果我們把這個(gè)文件拷貝到小程序中，只需要讓程序能正常進(jìn)入第三行代碼，就能把Redux加載進(jìn)來。
將第二行代碼：if(typeof exports === 'object' && typeof module === 'object')

修改成：

if(typeof module === 'object')

這樣修改的原因是，在微信小程序的環(huán)境中是沒有exports變量的，所以就沒辦法正確進(jìn)入這個(gè)分支，刪除之后就可以正確進(jìn)入了
拷貝進(jìn)工程目錄
例如，我們拷貝到libs目錄下，那么我們?cè)诔绦蛑惺褂脮r(shí)，只要當(dāng)做是一個(gè)本地模塊去require就可以了：

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

通過這里的示例，其實(shí)我們發(fā)現(xiàn)，我們可以通過類似的方法，使用Webpack打包第三方庫，就可以集成任何庫了。

使用Redux

我們可以使用Redux的微信小程序綁定庫來簡化一些代碼：wechat-weapp-redux，

詳細(xì)的安裝和使用說明可以參照wechat-weapp-redux的README

集成Redux-devtools

如果沒有redux-devtools那么使用redux的效果可能是要減半的。

因?yàn)槲⑿判〕绦虻拈_發(fā)環(huán)境是定制的，暫時(shí)沒有發(fā)現(xiàn)辦法直接安裝redux-devtool的插件。

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

安裝remote-redux-devtools
- 原版的remote-redux-devtools使用的一個(gè)websocket的依賴會(huì)使用原生的WebSocket，小程序是不支持的，所以需要改成小程序的websocket實(shí)現(xiàn)。
- 修改好的包在這里：remote-redux-devtools
- 把代碼下載到工程目錄里面就可以用了。
安裝和啟動(dòng)remotedev-server

npm install -g remotedev-server

remotedev --hostname=localhost --port=5678

因?yàn)闆]辦法用npm安裝到本地（開頭提到的，微信小程序會(huì)嘗試去加載項(xiàng)目目錄中的所有js），所以這里使用全局安裝，第二條命令是啟動(dòng)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是指定為之前啟動(dòng)remotedev-server啟動(dòng)時(shí)候指定的參數(shù)。保存之后重啟一下小程序，如果沒有報(bào)錯(cuò)的話就OK了