redux for wxa.
- mount wxa-redux to wxa's instance.
// app.wxa app.js
import {wxa} from '@wxa/core'
import {wxaRedux, combineReducers} from '@wxa/redux'
import promiseMiddleware from 'redux-promise';
wxa.use(wxaRedux, {
reducers: combineReducers(...your reducer),
middlewares: [promiseMiddleware]
})- add map to your page
// page.js
import {Page, wxa} from '@wxa/core'
@Page
class Index {
mapState = {
todolist : (state)=>state.todo
}
methods = {
bindtap() {
// dispatch your commit here
this.store.dispatch({type: 'Add_todo_list', payload: 'coding today'});
// and your page data will auto update.
}
}
}
wxa.launchPage(Index)- add map to your Component
// component.js
import {GetApp} from '@wxa/core'
// redux need mount app to com.
@GetApp
class Com {
mapState = {
todolist : (state)=>state.todo
}
methods = {
bindtap() {
// dispatch your commit here
this.store.dispatch({type: 'Add_todo_list', payload: 'coding today'});
// and your page data will auto update.
}
}
}
wxa.launchComponent(Com);wxa-redux has different tasks to do according to current type. while in App layer, wr just create a store and mount store in the app. But in Page or Component layer, wr do a lot for users.
-
App create store, apply middelware and mount store in app.
-
Page we do different staff on essential life hook
onLoadwr subscribe toapp.storeand add a unsubscribe function to the instance.onShowmark instance with$isCurrentPage, do once map stateonHidereset$isCurrentPageso that data will not update while page not at the frontonUnloadunsubscribe change
- Component also doing little thing for com
createdmount storeattachedsubscribe state changedetachedunsubscribe