這篇文章主要介紹了微信小程式Redux綁定實例詳解的相關資料,需要的朋友可以參考下
微信小程式Redux綁定實例詳解
安裝
clone或下載程式碼庫到本地:
#git clone https://github.com/charleyw/wechat-weapp-redux
將dist/wechat-weapp- redux.js(或拷貝minify的也可以)檔案直接拷貝到小程式的工程中,例如（下面假設我們把第三方包都安裝在libs目錄下）:
cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs
上面的指令將包拷貝到小程式的libs目錄下
#使用
1.將Redux Store綁定到App上。
const store = createStore(reducer) // redux store
const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
const {Provider} = WeAppRedux;Provider是用來把Redux的store綁定到App。
App(Provider(store)({
onLaunch: function () {
console.log("onLaunch")
}
}))provider的實作只是簡單的將store加到App這個global物件上,方便在頁面中用getApp取出來
上面這段程式碼等同於:
App({
onLaunch: function() {
console.log( "onLaunch" )
},
store: store
})2.在頁面的定義上使用connect,綁定redux store到頁面上。
const pageConfig = {
data: {
},
...
}頁面的定義
#const mapStateToData = state => ({
todos: state.todos,
visibilityFilter: state.visibilityFilter
})定義要對應哪些state到頁面
const mapDispatchToPage = dispatch => ({
setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
toggleTodo: id => dispatch(toggleTodo(id)),
addTodo: text => dispatch(addTodo(text)),
})定義要映射哪些方法到頁面
const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
使用connect將上述定義加入到pageConfig中。
Page(nextPageConfig);
註冊小程式的頁面
#3.說明
##完成上述兩步驟後,你就可以在this.data中存取你在mapStateToData定義的資料了。 mapDispatchToPage定義的action會被對應到this物件上。 以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ 相關推薦：#
以上是關於微信小程式Redux綁定的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
