微信小程序Redux綁定實(shí)例詳解
微信小程序Redux綁定實(shí)例詳解
安裝
clone或者下載代碼庫到本地:
git clone https://github.com/charleyw/wechat-weapp-redux
將dist/wechat-weapp-redux.js(或者拷貝minify的也可以)文件直接拷貝到小程序的工程中,例如(下面假設(shè)我們把第三方包都安裝在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的實(shí)現(xiàn)只是簡單的將store加到App這個(gè)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會(huì)被映射到this對象上。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
詳解如何用js實(shí)現(xiàn)一個(gè)網(wǎng)頁版節(jié)拍器
這篇文章主要為大家介紹了詳解如何用js實(shí)現(xiàn)一個(gè)網(wǎng)頁版節(jié)拍器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01使用純JavaScript封裝一個(gè)消息提示條功能示例詳解
這篇文章主要為大家介紹了使用純JavaScript封裝一個(gè)消息提示條功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序 簡單實(shí)例(閱讀器)的實(shí)例開發(fā)
這篇文章主要介紹了微信小程序 簡單實(shí)例(閱讀器)的實(shí)例開發(fā)的相關(guān)資料,需要的朋友可以參考下2016-09-09autojs寫一個(gè)畫板實(shí)現(xiàn)AI換頭狗頭蛇
這篇文章主要為大家介紹了autojs寫一個(gè)畫板實(shí)現(xiàn)AI換頭狗頭蛇過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用
JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用...2006-06-06競態(tài)條件Race condition及如何避免的三種方案詳解
這篇文章主要為大家介紹了競態(tài)條件Race condition及如何避免的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10Babel?插件開發(fā)&訪問節(jié)點(diǎn)實(shí)例詳解
這篇文章主要為答案及介紹了Babel?插件開發(fā)&訪問節(jié)點(diǎn)實(shí)例詳解,整理一下?Babel?插件開發(fā)時(shí)用得到的轉(zhuǎn)換操作相關(guān)的?API,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定
這篇文章主要介紹了微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08