redux weapp

redux-weapp

การจัดการสถานะบน Redux สำหรับแอปเพล็ต Wechat (微信小程序, weapp) เพื่อเชื่อมต่อร้านค้า Redux กับวงจรชีวิตของแอปหรือเพจของ weapp

ติดตั้ง

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

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

# via yarn
yarn add -D redux-weapp

สร้าง

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

การใช้งาน

ก่อนที่จะลองใช้ตัวอย่างโค้ดสาธิตเหล่านี้ คุณควร/ต้องมีประสบการณ์ในการพัฒนา weapp modulize ก่อน 微信小程序模块化hao发实践

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

เชื่อมต่อกับแอพ 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 )

เชื่อมต่อกับเพจ weapp

สมมติว่าเรามีรูปร่างร้านค้าดังต่อไปนี้:

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

และเราได้กำหนดผู้สร้างการกระทำ (FSA) เป็น:

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

ตกลง มาเชื่อมต่อร้านค้ากับหน้ารายการสิ่งที่ต้องทำกันดีกว่า

 // 
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 ) 

เชื่อมต่อ API

เชื่อมต่อแอพ

 //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 )

เชื่อมต่อหน้า

 //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 )

ฟังก์ชัน onStateChange

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

• initFlag : คุณสมบัติใหม่จาก [email protected] ดูส่วนการเปลี่ยนแปลงเพื่อดูรายละเอียด

การเปลี่ยนแปลงจาก v0.2.x

connect.App API

• ลบอาร์กิวเมนต์ appLaunchOptions ออกจากฟังก์ชัน 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 ,
} )

connect.Page API

• ลบอาร์กิวเมนต์ pageLoadOptions ออกจากฟังก์ชัน 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 ,
} )

onStateChange โทรกลับ

• เพิ่ม initFlag เป็นอาร์กิวเมนต์ที่ 3 ซึ่งอาจเป็นค่าสตริง INIT_SYNC ในการจัดส่งครั้งแรกเท่านั้น undefined เป็นอย่างอื่น

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

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

วงจรชีวิต

สำหรับแอป weapp

• onLaunch

ตั้งค่า Listener การสมัครสมาชิกเมื่อมีการเรียกใช้ฟังก์ชัน onLaunch และสถานะร้านค้าเริ่มต้นจะถูกเผยแพร่

• onShow

Listener ที่ไม่ได้ใช้งานจะถูกตั้งค่าให้ active เมื่อมีการเรียกใช้ฟังก์ชัน onShow และผู้ฟังจะถูกเรียกด้วยสถานะสุดท้าย

• onHide

Listener ที่ใช้งานอยู่จะถูกตั้งค่า inactive เมื่อมีการเรียกใช้ฟังก์ชัน onHide

สำหรับเพจ weapp

• onLoad

ตั้งค่าผู้ฟังสมัครสมาชิกเมื่อมีการเรียกใช้ฟังก์ชัน onLoad และสถานะร้านค้าเริ่มต้นจะถูกออกอากาศ

• onShow

Listener ที่ไม่ได้ใช้งานจะถูกตั้งค่าให้ active เมื่อมีการเรียกใช้ฟังก์ชัน onShow และผู้ฟังจะถูกเรียกด้วยสถานะสุดท้าย

• onHide

Listener ที่ใช้งานอยู่จะถูกตั้งค่า inactive เมื่อมีการเรียกใช้ฟังก์ชัน onHide

• onUnload

Listener จะถูกลบออกเมื่อมีการเรียกใช้ฟังก์ชัน onUnload

---

ขอให้โชคดี!