1.0.4 • Published 4 years ago
hooks-redux2 v1.0.4
hooks-redux
use hooks to make redux simplemness,use context send store to every components, remove reducer, support trunk and more change model methods
user
app.js
import { createHooksStore, getHooksStore, Provider } from 'hooks-redux2';
import User from './User';
import Money from './Money';
const userModel = {
name: 'guolei',
age: 18
}
const salaryModel = {
base: '3000',
other: '10'
}
function App() {
const store = createHooksStore({
userModel,
salaryModel
})
return (
<Provider value={store}>
<User></User>
<Money></Money>
</Provider>
)
}
getState setState
you can use arguments or object to set state
User.js
function User() {
const [ state, set ] = getHooksStore('userModel');
const { name, age } = state;
return (
<div>
<div>name: { name }</div>
<div>age: { age }</div>
<button onClick={() => { set('name', 'gray') }}> modify name</button>
<button onClick={() => { set( {age: 100}) }}> modify name</button>
</div>
)
}
set other model
Money
function Money() {
const [ salaryState, salarySet ] = getHooksStore('salaryModel');
const [ userState, userSet ] = getHooksStore('userModel');
const { base, other } = salaryState;
return (
<div>
<div>base: { base }</div>
<div>other: { other }</div>
<button onClick={() => { salarySet('base', 10000) }}> modify base</button>
<button onClick={() => { userSet( 'age': 100 ) }}> modify userState age</button>
</div>
)
}
hooks-redux-thunk
use trunk to seperate View and Controller, male View more reuseness
const xhrAge = (name) => async (userSet) => {
const newAge = await queryAge(name);
userSet('age', newAge)
}
function ThunkExample() {
const [ state, set ] = getHooksStore('userModel');
const { name, age } = state;
return (
<div>
<p>age: {age}</p>
<button onClick={ () => { set( xhrAge(name) ) } }>async set salaryModal other</button>
</div>
)
}