這篇文章主要介紹了微信小程序redux綁定實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序Redux綁定實(shí)例詳解
安裝
clone或者下載代碼庫到本地:
git clone https://github.com/charleyw/wechat-weapp-redux
登錄后復(fù)制
將dist/wechat-weapp-redux.js(或者拷貝minify的也可以)文件直接拷貝到小程序的工程中,例如（下面假設(shè)我們把第三方包都安裝在libs目錄下）:
cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目錄>/libs
登錄后復(fù)制
上面的命令將包拷貝到小程序的libs目錄下
使用
1.將Redux Store綁定到App上。
const store = createStore(reducer) // redux store
const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
const {Provider} = WeAppRedux;
登錄后復(fù)制
Provider是用來把Redux的store綁定到App上。
App(Provider(store)({
onLaunch: function () {
console.log("onLaunch")
}
}))
登錄后復(fù)制
provider的實(shí)現(xiàn)只是簡單的將store加到App這個(gè)global對象上,方便在頁面中用getApp取出來
上面這段代碼等同于:
App({
onLaunch: function() {
console.log( "onLaunch" )
},
store: store
})
登錄后復(fù)制
2.在頁面的定義上使用connect,綁定redux store到頁面上。
const pageConfig = {
data: {
},
...
}
登錄后復(fù)制
頁面的定義
const mapStateToData = state => ({
todos: state.todos,
visibilityFilter: state.visibilityFilter
})
登錄后復(fù)制
定義要映射哪些state到頁面
const mapDispatchToPage = dispatch => ({
setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
toggleTodo: id => dispatch(toggleTodo(id)),
addTodo: text => dispatch(addTodo(text)),
})
登錄后復(fù)制
定義要映射哪些方法到頁面
const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
登錄后復(fù)制
使用connect將上述定義添加到pageConfig中。
Page(nextPageConfig);
登錄后復(fù)制
注冊小程序的頁面
3.說明
完成上述兩步之后,你就可以在this.data中訪問你在mapStateToData定義的數(shù)據(jù)了。
mapDispatchToPage定義的action會(huì)被映射到this對象上。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是關(guān)于微信小程序Redux綁定的解析的詳細(xì)內(nèi)容，更多請關(guān)注有卡有網(wǎng)。
