Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/open-federation/moox
moox is a high-performance state management tool of based on redux.
https://github.com/open-federation/moox
react redux state-management
Last synced: 13 days ago
JSON representation
moox is a high-performance state management tool of based on redux.
- Host: GitHub
- URL: https://github.com/open-federation/moox
- Owner: Open-Federation
- Created: 2018-02-01T12:56:57.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-01-06T06:57:10.000Z (almost 3 years ago)
- Last Synced: 2024-12-15T11:04:24.079Z (21 days ago)
- Topics: react, redux, state-management
- Language: TypeScript
- Homepage:
- Size: 510 KB
- Stars: 40
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# moox
moox is a high-performance state management tool of based on redux.
[中文文档](README_CN.md)
> version 2.0 is refactoring by ts.
## Install
```bash
npm install moox
```
## Getting Started
### 1.create Model
The structure of the model is as the following sample code，state is initialState of model, action is used of calculating state。
```js
import {createModel} from 'moox'
type StateType = {
list: string[],
status: number,
filterText: string,
currentEditIndex: number
}
const state : StateType = {
list: ['tom', 'xiaoming'],
status: 0,
filterText: '',
currentEditIndex: 0
}
const actions = {
changeCurrentEditUser: function (state: StateType, params: {
name: string,
index: number, //index of todo list
}) {
state.list[params.index] = params.name;
},
changeFilterValue: function (state: StateType, params: {
text?: string
}) {
state.filterText = params.text;
},
changeEditIndex: function (state: StateType, params) {
state.currentEditIndex = params.index;
},
addUser: function (state: StateType, params) {
state.list.push(getRandomName());
state.status = 0;
},
requestStatus: function (state: StateType, params) {
state.status = 1;
},
delUser: function (state: StateType, params) {
state.list.splice(params.index, 1);
}
}
export default createModel({
state,
actions
});
function getRandomName(len = 4) {
let str = '';
while (len--) str += String.fromCharCode(97 + Math.ceil(Math.random() * 25));
return str;
}
```
### 2.Bind the component to the Provider
```js
export default Models.getProvider(App)
```
### 3.Get store data from hook
```js
import React from 'react'
import Model from './model'
const App = (props)=>{
const store = useModel((state) => ({
user: state.user
}))
const {user} = store;
const handleClick = () =>{
if(user.status === 1) return;
Model.user.requestStatusAction()
Model.user.addUserAction()
}
return
Add Random Number
{user.status === 1? 'loading...' : ''}
{user.list.map((item, index)=>{
return
{item}
})}
}
export default App;
```
>Note: class components example:
```js
import {connect} from 'react-redux';
const changeState = ()=>{
Models.user.changeStateAction({
x: Math.random()
})
}
@connect(state=>({
store: state.user
}))
const Home = class extends React.PureComponent{
render(){
const {store} = this.props;
return {JSON.stringify(store)}
}
}
```
For more detailed usage, please refer to [demo](https://github.com/Open-Federation/moox/tree/master/demo)