基于Redux的微信小程序状态管理 (Alpha)

基于Redux的微信小程序状态管理 (Alpha)

redux-weapp

Redux-based State Management for Wechat applet(微信小程序, weapp), to connect Redux store with your weapp's App or Page lifecycles.

Install

# via Githubnpm install xixilive/redux-weapp --save-dev# via npmnpm install redux-weapp --save-dev# via yarnyarn 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 storeimport {createStore} from 'redux'//create your Redux storeconst store = createStore(...)

connect to weapp App

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 appApp(config)

connect to weapp Page

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 pagePage(config)

connect API

connect.App

//define app connect functionfactory = connect.App( store:ReduxStore, mapStateToProps:Function(state:Object), mapDispatchToProps:Function(dispatch:Function)):Function//build a store-binding app config objectconfig = factory({ onLaunch(options:Object){}, onStateChange(nextState:Object, prevState:Object, initFlag:Any), //...}):Object//launch app with store-binding configApp(config)

connect.Page

//define page connect functionfactory = connect.Page( store:ReduxStore, mapStateToProps:Function(state:Object), mapDispatchToProps:Function(dispatch:Function)):Function//build a store-binding page config objectconfig = factory({ onLoad(options:Object){}, onStateChange(nextState:Object, prevState:Object, initFlag:Any) //...}):Object//start page instance with store-binding configPage(config)

the onStateChange function

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

initFlag: new feature from redux-weapp@0.2.x, see Changes section for details.

Changes from v0.2.x

connect.App API

removed appLaunchOptions argument from mapState function.

// v0.1.xconnect.App({ store:ReduxStore, mapState:Function(state:Object, appLaunchOptions:Object):Object, mapDispatch:Function(dispatch:Function):Object,})// v0.2.xconnect.App({ store:ReduxStore, mapState:Function(state:Object):Object, mapDispatch:Function(dispatch:Function):Object,})

connect.Page API

removed pageLoadOptions argument from mapState function.

// v0.1.xconnect.Page({ store:ReduxStore, mapState:Function(state:Object, pageLoadOptions:Object):Object, mapDispatch:Function(dispatch:Function):Object,})// v0.2.xconnect.Page({ store:ReduxStore, mapState:Function(state:Object):Object, mapDispatch:Function(dispatch:Function):Object,})

onStateChange callback

add initFlag as the 3rd argument, which could be a string value INIT_SYNC just on the very first dispatch, undefined otherwise.

// v0.1.xonStateChange(nextState:Object, prevState:Object)// v0.2.xonStateChange(nextState: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!

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。