Analysis on Redux binding of WeChat applet

This article mainly introduces the relevant information about the detailed explanation of the Redux binding instance of the WeChat applet. Friends in need can refer to

Detailed explanation of the Redux binding instance of the WeChat applet

Install

clone or download the code library to the local:

git clone https://github.com/charleyw/wechat-weapp-redux

Place dist/wechat-weapp- Copy the redux.js (or copy minify) file directly to the mini program project, for example (below we assume that we install all third-party packages in the libs directory):

cd wechat-weapp-redux
 cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

The above command copies the package to the libs directory of the mini program

Use

1. Bind the Redux Store to on the App.

const store = createStore(reducer) // redux store
 
 const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
 const {Provider} = WeAppRedux;

Provider is used to bind the Redux store to the App.

App(Provider(store)({
 onLaunch: function () {
  console.log("onLaunch")
 }
}))

The implementation of provider is simply to add the store to the global object App, so that it can be taken out using getApp in the page

Above This code is equivalent to:

App({
 onLaunch: function() {
   console.log( "onLaunch" )
  },
  store: store
})

2. Use connect on the definition of the page to bind the redux store to the page.

const pageConfig = {
  data: {
  },
  ...
 }

Definition of page

const mapStateToData = state => ({
  todos: state.todos,
  visibilityFilter: state.visibilityFilter
 })

Define which states to map to Page

const mapDispatchToPage = dispatch => ({
  setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
  toggleTodo: id => dispatch(toggleTodo(id)),
  addTodo: text => dispatch(addTodo(text)),
 })

Define which methods to map to page

const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)

Use connect to connect the above The definition is added to pageConfig.

Page(nextPageConfig);

The page to register the mini program

3. Instructions

After completing the above two steps , you can access the data you defined in mapStateToData in this.data.

The action defined by mapDispatchToPage will be mapped to this object.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to UI and container components in WeChat Mini Programs

About the MD5 method of WeChat Mini Programs Analysis

Introduction to the use of the new drag component movable-view in the WeChat applet

The above is the detailed content of Analysis on Redux binding of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!