redux-weapp
Redux-based State Management for Wechat applet(微信小程序, weapp), to connect Redux store with your weapp's App or Page lifecycles.
Install
# via Github
npm install xixilive/redux-weapp --save-dev
# via npm
npm install redux-weapp --save-dev
# via yarn
yarn add -D redux-weapp
Build
git clone https://github.com/xixilive/redux-weapp.git \ && cd redux-weapp \ && yarn \ && yarn build
Usage
Before trying these demo code snippets, you should/must be experienced in weapp modulize development. 微信小程序模块化开发实践
// Redux store//create your Redux storeconst store =
connect to weapp App
const config = connect {} //..., { this } // construct your app
connect to weapp Page
Assume we have a store shape as following:
and we have defined an action creator(FSA) as:
const fetchTodosAction = type: 'FETCH_TODOS' filter: status
Ok, let's connect store to todo-list page.
// const config = connect { this } { const todos = nextState this // to update UI } // view interactions { this } { this } // construct your page
connect API
connect.App
//define app connect functionfactory = connect.App store:ReduxStore, mapStateToProps:Functionstate:Object, mapDispatchToProps:Functiondispatch:Function:Function //build a store-binding app config objectconfig = factory:Object //launch app with store-binding configAppconfig
connect.Page
//define page connect functionfactory = connect.Page store:ReduxStore, mapStateToProps:Functionstate:Object, mapDispatchToProps:Functiondispatch:Function:Function //build a store-binding page config objectconfig = factory:Object //start page instance with store-binding configPageconfig
onStateChange
function
the // would be called after each concerned state changedonStateChangenextState:Object, prevState:Object, initFlag:Any:void
initFlag
: new feature fromredux-weapp@0.2.x
, see Changes section for details.
Changes from v0.2.x
connect.App
API
- removed
appLaunchOptions
argument frommapState
function.
// v0.1.xconnect.App // v0.2.xconnect.App
connect.Page
API
- removed
pageLoadOptions
argument frommapState
function.
// v0.1.xconnect.Page // v0.2.xconnect.Page
onStateChange
callback
- add
initFlag
as the 3rd argument, which could be a string valueINIT_SYNC
just on the very first dispatch,undefined
otherwise.
// v0.1.xonStateChangenextState:Object, prevState:Object // v0.2.xonStateChangenextState:Object, prevState:Object, initFlag:Any
Lifecycles
for weapp App
onLaunch
setup an subscribe listener when onLaunch
function called, and the initial store state will be broadcasted.
onShow
An inactive listener will be set to active
when onShow
function has called, and the listener will be called with last state.
onHide
An active listener will be set to inactive
when onHide
function has called.
for weapp Page
onLoad
setup an subscribe listener when onLoad
function called, and the initial store state will be broadcasted.
onShow
An inactive listener will be set to active
when onShow
function has called, and the listener will be called with last state.
onHide
An active listener will be set to inactive
when onHide
function has called.
onUnload
The listener will be remove when onUnload
function has called.
Good luck!