2.0.0 • Published 3 years ago
moox v2.0.0
moox
moox is a high-performance state management tool of based on redux.
version 2.0 is refactoring by ts.
Install
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。
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
export default Models.getProvider(App)
3.Get store data from hook
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 <div>
<div><button onClick={handleClick}>Add Random Number</button>
{user.status === 1? 'loading...' : ''}
</div>
{user.list.map((item, index)=>{
return <div key={index}>{item}</div>
})}
</div>
}
export default App;
Note: class components example:
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 <span onClick={changeState} >{JSON.stringify(store)}</span>
}
}
For more detailed usage, please refer to demo
2.0.0
3 years ago
1.1.0
3 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0-beta6
7 years ago
1.0.0-beta5
7 years ago
1.0.0-beta3
7 years ago
1.0.0-beta2
7 years ago
1.0.0-beta1
7 years ago
1.0.0
7 years ago