Redux-based State Management for Wechat applet(微信小程序, weapp), to connect Redux store with your weapp's App or Page lifecycles.
# 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
Before trying these demo code snippets, you should/must be experienced in weapp modulize development. 微信小程序模块化开发实践
// Redux store
import {createStore} from 'redux'
//create your Redux store
const store = createStore(...)
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)
Assume we have a store shape as following:
{
"todos": [
{
"title": "String",
"complete": "Boolean"
}
]
}
and we have defined an action creator(FSA) as:
const fetchTodosAction = (status) => ({type: 'FETCH_TODOS', filter: {status}})
Ok, let's connect store to todo-list page.
//
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)
//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)
// would be called after each concerned state changed
onStateChange(nextState:Object, prevState:Object, initFlag:Any):void
initFlag
: new feature from[email protected]
, see Changes section for details.
- removed
appLaunchOptions
argument frommapState
function.
// 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,
})
- removed
pageLoadOptions
argument frommapState
function.
// 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,
})
- add
initFlag
as the 3rd argument, which could be a string valueINIT_SYNC
just on the very first dispatch,undefined
otherwise.
// v0.1.x
onStateChange(nextState:Object, prevState:Object)
// v0.2.x
onStateChange(nextState:Object, prevState:Object, initFlag:Any)
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.
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!