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 buildBefore 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):voidinitFlag: new feature from[email protected], see Changes section for details.
- removed
appLaunchOptionsargument frommapStatefunction.
// 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
pageLoadOptionsargument frommapStatefunction.
// 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
initFlagas the 3rd argument, which could be a string valueINIT_SYNCjust on the very first dispatch,undefinedotherwise.
// 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!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent