微信小程序Redux綁定實例詳解
更新時間：2017年06月07日 15:22:48 投稿：lqh
這篇文章主要介紹了微信小程序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的實現(xiàn)只是簡單的將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定義的數(shù)據(jù)了。
mapDispatchToPage定義的action會被映射到this對象上。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要為大家介紹了js基于div絲滑實現(xiàn)貝塞爾曲線示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了關于JavaScript輪播圖的實現(xiàn),下面文章主要是利用利用html 和 css 代碼實現(xiàn)輪播圖，詳細內容請參考下面詳細內容，希望對你有所幫助2021-11-11
這篇文章主要介紹了微信小程序 SocketIO 的相關資料,這里給大家提供了一個簡單實例，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JavaScript對象管家Proxy使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 video詳解及簡單實例的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JavaScript流程控制2021-12-12
這篇文章主要介紹了微信小程序頁面開發(fā)注意事項整理的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了ECMAScript?6數(shù)組的擴展實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
實現(xiàn)微信小程序的wxml文件和wxss文件在webstrom的支持
這篇文章主要介紹了實現(xiàn)微信小程序的wxml文件和wxss文件在webstrom的支持的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript的基本語法,包括注釋和書寫格式等基本知識,需要的朋友可以參考下2015-06-06