redux weapp

redux-weapp

Applet de gestion d'état basé sur Redux pour Wechat (微信小程序, weapp), pour connecter la boutique Redux aux cycles de vie de l'application ou de la page de votre weapp.

Installer

 # via Github
npm install xixilive/redux-weapp --save-dev

# via npm
npm install redux-weapp --save-dev

# via yarn
yarn add -D redux-weapp

Construire

git clone https://github.com/xixilive/redux-weapp.git 
  && cd redux-weapp 
  && yarn 
  && yarn build

Usage

Avant d'essayer ces extraits de code de démonstration, vous devriez/devez être expérimenté dans le développement de weapp modulize. 微信小程序模块化开发实践

 // Redux store
import { createStore } from 'redux'
//create your Redux store
const store = createStore ( ... ) 

connectez-vous à l'application weapp

 import connect from 'redux-weapp'
const config = connect . App (
  store ,
  //to map next state into your app
  ( state ) => {
    // must return an object, which will be passed to onStateChange function
    return { }
  } ,
  // to bind dispatch with your action,
  // and this binding will be injected into your app object.
  ( dispatch ) => {
    // return an object, which can be invoked within app context(this scope).
    return { }
  }
) ( {
  onLaunch ( options ) { } ,
  //...,
  onStateChange ( nextState , prevState , initFlag ) {
    this . setData ( { ... this . data , ... nextState } )
  }
} )

// construct your app
App ( config )

se connecter à la page weapp

Supposons que nous ayons une forme de magasin comme suit :

{
  "todos" : [
    {
      "title" : " String " ,
      "complete" : " Boolean "
    }
  ]
}

et nous avons défini un créateur d'action (FSA) comme :

 const fetchTodosAction = ( status ) => ( { type : 'FETCH_TODOS' , filter : { status } } )

Ok, connectons le magasin à la page de liste de tâches.

 // 
import connect from 'redux-weapp'

const config = connect . Page (
  store ,
  //to map next-state into your page
  ( state ) => ( { todos : state . todos } ) ,

  // to bind dispatch with your action creators,
  // and this binding will be injected into your page object
  ( dispatch ) => ( {
    fetchTodos ( status = 'inprogress' ) {
      // dispatch an action
      dispatch ( fetchTodosAction ( status ) )
    }
  } )
) ( {
  onLoad ( options ) {
    this . fetchTodos ( 'inprogress' )
  } ,
  
  onStateChange ( nextState , prevState , initFlag ) {
    const { todos } = nextState
    this . setData ( { todos } ) // to update UI
  } ,

  // view interactions
  onTapCompleteTab ( ) {
    this . fetchTodos ( 'complete' )
  } ,

  onTapInProgressTab ( ) {
    this . fetchTodos ( 'inprogress' )
  }
} )

// construct your page
Page ( config ) 

connecter l'API

connecter.App

 //define app connect function
factory = connect . App (
  store : ReduxStore , 
  mapStateToProps : Function ( state : Object ) , 
  mapDispatchToProps : Function ( dispatch : Function )
) : Function

//build a store-binding app config object
config = factory ( {
  onLaunch ( options : Object ) { } ,
  onStateChange ( nextState : Object , prevState : Object , initFlag : Any ) ,
  //...
} ) : Object

//launch app with store-binding config
App ( config )

connecter.Page

 //define page connect function
factory = connect . Page (
  store : ReduxStore , 
  mapStateToProps : Function ( state : Object ) , 
  mapDispatchToProps : Function ( dispatch : Function )
) : Function

//build a store-binding page config object
config = factory ( {
  onLoad ( options : Object ) { } ,
  onStateChange ( nextState : Object , prevState : Object , initFlag : Any )
  //...
} ) : Object

//start page instance with store-binding config
Page ( config )

la fonction onStateChange

 // would be called after each concerned state changed
onStateChange ( nextState : Object , prevState : Object , initFlag : Any ) : void

• initFlag : nouvelle fonctionnalité de [email protected] , voir la section Modifications pour plus de détails.

Modifications par rapport à la v0.2.x

API connect.App

• suppression de l'argument appLaunchOptions de la fonction mapState .

 // v0.1.x
connect . App ( {
  store : ReduxStore ,
  mapState : Function ( state : Object , appLaunchOptions : Object ) : Object ,
  mapDispatch : Function ( dispatch : Function ) : Object ,
} )

// v0.2.x
connect . App ( {
  store : ReduxStore ,
  mapState : Function ( state : Object ) : Object ,
  mapDispatch : Function ( dispatch : Function ) : Object ,
} )

API connect.Page

• suppression de l'argument pageLoadOptions de la fonction mapState .

 // v0.1.x
connect . Page ( {
  store : ReduxStore ,
  mapState : Function ( state : Object , pageLoadOptions : Object ) : Object ,
  mapDispatch : Function ( dispatch : Function ) : Object ,
} )

// v0.2.x
connect . Page ( {
  store : ReduxStore ,
  mapState : Function ( state : Object ) : Object ,
  mapDispatch : Function ( dispatch : Function ) : Object ,
} )

rappel onStateChange

• ajoutez initFlag comme 3ème argument, qui pourrait être une valeur de chaîne INIT_SYNC uniquement lors de la toute première répartition, undefined autrement.

 // v0.1.x
onStateChange ( nextState : Object , prevState : Object )

// v0.2.x
onStateChange ( nextState : Object , prevState : Object , initFlag : Any ) 

Cycles de vie

pour l'application weapp

• onLaunch

configurez un écouteur d'abonnement lorsque la fonction onLaunch est appelée, et l'état initial du magasin sera diffusé.

• onShow

Un écouteur inactif sera défini sur active lorsque la fonction onShow sera appelée, et l'écouteur sera appelé avec le dernier état.

• onHide

Un écouteur actif sera défini sur inactive lorsque la fonction onHide sera appelée.

pour la page Weapp

• onLoad

configurez un écouteur d'abonnement lorsque la fonction onLoad est appelée, et l'état initial du magasin sera diffusé.

• onShow

Un écouteur inactif sera défini sur active lorsque la fonction onShow sera appelée, et l'écouteur sera appelé avec le dernier état.

• onHide

Un écouteur actif sera défini sur inactive lorsque la fonction onHide sera appelée.

• onUnload

L'écouteur sera supprimé lorsque la fonction onUnload sera appelée.

---

Bonne chance!