Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/herculesJS/herculex
Predictable state container for alipay mini-program inspired by vuex, redux, immutableJS,elm,rxjs
https://github.com/herculesJS/herculex
Last synced: about 1 month ago
JSON representation
Predictable state container for alipay mini-program inspired by vuex, redux, immutableJS,elm,rxjs
- Host: GitHub
- URL: https://github.com/herculesJS/herculex
- Owner: herculesJS
- Created: 2018-10-07T16:51:54.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-29T08:53:06.000Z (over 3 years ago)
- Last Synced: 2024-08-02T03:07:56.349Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 147 KB
- Stars: 69
- Watchers: 7
- Forks: 7
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-state - herculex - program inspired by vuex, redux, immutableJS,elm,rxjs (mini-programe)
README
# herculeX
Simple, predictable, lightweight, high performance, developer friendly state management for alipay mini-program
## Feature
- [x] Component, Page, global wrapper
- [x] vuex-like apis and concept: actions, mutations, getters, plugins
- [x] strengthen mutation, getters: add immutable helper, global power to getters.and improve mutation usecase, add some common innerMutation
- [x] plugins support, add logger as inner plugin
- [x] cross page communication: message channel, auto router dispatcher(manage router ), get ready-only State by namespace
- [x] cross components communication: support centralized ref management
- [x] connect: connect Page to Component, add mapStateToProps, mapGettersToProps, use more developer friendly way.
- [x] mapHelpers: connect actions and mutations to Page, Componnet methods
- [x] global store support: manage all store, component instance and global state, global message bus ,event bus
- [x] event bus support
- [x] router: improve router usecase, auto router dispatcher, add resume lifecycle
- [x] utils: immutable heplers, common functional tools, urlParser, promiseWrapper...
- [x] use immer and immutable helper to promise immutable
- [x] magic memoization: add special memoization feature to mapHelpersToProps
## Installation
* Installation: `npm install herculex --save`.
* basic usage:
* index.js
```
import store from './store';
const app = getApp();
Page(store.register({
mapActionsToMethod: ['getUserInfo'],
mapMutationsToMethod: ['helperWay'],
onLoad() {
const message = this.$message.pop('card-home');
// get message from last page as you like
},
onReady() {
const componentInstance = this.$getRef('card-input');
// get component ref, then get data when you need ,specially in form condition
},
onResume(ctx) {
// get ctx here,
},
...
onTap() {
}
})
```
* store.js
```
export default new Store({
connectGlobal: true,
state: {
userInfo: {},
bannerList: [],
UI,
},
getters: {
// functional promgraming, add some helpers
cardCount: (state, getters, global) => global.getIn(['entity', 'cardList', 'length'], 0),
avatar: state => state.getIn(['userInfo', 'iconUrl'], ASSETS.DEFAULT_AVATAR),
nickName: state => state.getIn(['userInfo', 'nick']),
cardList: (state, getters, global) => global.getIn(['entity', 'cardList'], []).map(mapCardItemToData),
},
mutations: {
mutableWay(state, payload) {
// use immer promise immutable
state.a = payload.a
},
helperWay(state, payload) {
// use inner helper: setIn, deleteIn, update
return state.setIn(['userInfo', 'name'], payload.name)
}
},
plugins: [ 'logger' ], // inner plugin logger
actions: {
async getUserInfo({ commit, state, dispatch, global, getters, }, payload) {
// get router and context in global store, all state are binded immutable helper
const routerCtx = global.getIn(['router', 'currentRouter']);
const avatar = getters.getIn('avatar');
const userInfo = await cardListService.getUserInfo();
commit('getUserInfo', { userInfo });
},
},
});
```
* index.axml
```
{{userInfo.name}}
{{UI.TEST}}
```
## Examples
* appx (alipay mini program)
* quick start
* [Counter](https://github.com/herculesJS/herculex-appx-examples/tree/master/quick-start/pages/counter) : show basic usage as commit & dispatch
* [TODOS](https://github.com/herculesJS/herculex-appx-examples/tree/master/quick-start/pages/todos): show how components and modules work
## Turtoral
## TODO
- [ ] add pageBeforeRender Action to do something before instance created
- [ ] add travis ci
- [ ] add middleware support, take over api middleware
- [ ] doc & gitbook,github.io
- [ ] examples & boilerplate
- [ ] cli for static code check, and generate snipets
- [ ] ide plugin
- [ ] model based api middleware
- [ ] test-utils & mock helper
- [ ] dev-tools for ide & standalone
- [ ] modules (need deeply design)
- [ ] error catcher plugin
- [ ] refactory and tests, separate appx data setter as independent repo