search
HomeWeChat AppletMini Program DevelopmentAnalysis on Redux binding of WeChat applet

Analysis on Redux binding of WeChat applet

Jun 26, 2018 pm 04:35 PM
reduxApplets

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(&#39;./libs/wechat-weapp-redux/index.js&#39;);
 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.