這篇文章主要介紹了微信小程式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中文網其他相關文章!