WeChat mini-program Redux binding instance details, mini-program redux

Detailed description of the BIND instance of the applet Redux, the applet redux

Detailed description of Redux binding instances

Install

Clone or download the code library to your local device:

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

Copy the dist/wechat-weapp-redux.js (or minify copy) file directly to the project of the applet, for example (Suppose we install all third-party packages under the libs directory ):

Cd wechat-weapp-redux cp-r dist/wechat-weapp-redux.js <APPLET root directory>/libs

The above Command copies the package to the libs directory of the applet.

Use

1. Bind the Redux Store to 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 store to the global Object of App, so that getApp can be used to obtain the global object on the page.

The above code is equivalent:

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

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

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

Page Definition

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

Define the state to be mapped to the page

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

Define the methods to map to the page

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

Use connect to add the above definition to pageConfig.

Page(nextPageConfig);

Register the applet page

3. Description

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

The action defined by mapDispatchToPage is mapped to this object.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!