關於微信小程式Redux綁定的解析

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

相關推薦：

微信小程式中UI與容器元件的介紹

關於微信小程式MD5的方法的解析

微信小程式新增的拖曳元件movable-view的使用介紹

#

以上是關於微信小程式Redux綁定的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！