redux weapp

redux-weapp

Wechat 애플릿(微信小程序, weapp)용 Redux 기반 상태 관리는 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 모듈화 개발 경험이 있어야 합니다. 微信小程序模块化开发实践

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

• mapState 함수에서 appLaunchOptions 인수를 제거했습니다.

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

• mapState 함수에서 pageLoadOptions 인수를 제거했습니다.

 // 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 세 번째 인수로 추가하세요. 이 인수는 첫 번째 디스패치에서 INIT_SYNC 문자열 값이 될 수 있으며, 그렇지 않으면 undefined .

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

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

수명주기

weapp 앱용

• onLaunch

onLaunch 함수가 호출될 때 구독 리스너를 설정하면 초기 저장소 상태가 브로드캐스트됩니다.

• onShow

onShow 함수가 호출되면 비활성 리스너가 active 으로 설정되고 리스너는 마지막 상태로 호출됩니다.

• onHide

onHide 함수가 호출되면 활성 리스너가 inactive 으로 설정됩니다.

weapp 페이지용

• onLoad

onLoad 함수가 호출될 때 구독 리스너를 설정하면 초기 저장소 상태가 브로드캐스트됩니다.

• onShow

onShow 함수가 호출되면 비활성 리스너가 active 으로 설정되고 리스너는 마지막 상태로 호출됩니다.

• onHide

onHide 함수가 호출되면 활성 리스너가 inactive 으로 설정됩니다.

• onUnload

onUnload 함수가 호출되면 리스너가 제거됩니다.

---

행운을 빌어요!