Analyse de la liaison Redux de l'applet WeChat

Cet article présente principalement les informations pertinentes sur l'explication détaillée de l'instance de liaison Redux de l'applet WeChat. Les amis qui en ont besoin peuvent se référer à

L'explication détaillée de l'instance de liaison Redux de l'applet WeChat. Applet WeChat

Installer

cloner ou télécharger la bibliothèque de codes en local :

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

Changer dist/wechat - Copiez le fichier weapp-redux.js (ou copiez minify) directement dans le projet du mini programme, par exemple (en supposant ci-dessous que nous installons tous les packages tiers dans le répertoire libs) :

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

La commande ci-dessus copiera le package dans le répertoire libs du mini programme

Utilisez

1. Redux Store est lié à l'application.

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

Le fournisseur est utilisé pour lier la boutique Redux à l'application.

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

L'implémentation du fournisseur ajoute simplement le magasin à l'objet global App, ce qui est pratique pour retirer en utilisant getApp sur la page

Le code ci-dessus est équivalent à :

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

2. Utilisez connect sur la définition de la page pour lier le magasin redux à la page.

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

Définition de la page

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

Définition d'être Mapper les états vers la page

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

Définir les méthodes à mapper vers la page

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

Utilisez connect pour ajouter la définition ci-dessus à pageConfig.

Page(nextPageConfig);

Page d'inscription au mini-programme

3. Instructions

Remplissez les deux ci-dessus. Après cette étape, vous pouvez accéder aux données que vous avez définies dans mapStateToData dans this.data.

L'action définie par mapDispatchToPage sera mappée à cet objet.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'interface utilisateur et aux composants de conteneur dans les mini-programmes WeChat

À propos de la méthode MD5 de WeChat Analyse des mini-programmes

Introduction à l'utilisation du nouveau composant glisser vue mobile dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!