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>
    )
}