@airma/react-state

@airma/react-state

@airma/react-state is a simple reducer tool, you can use it to replace useReducer, if you want more functions like state synchronization and asynchronous request manage, you can try use-agent-reducer.

@airma/react-state works like that:

import React from 'react';
import {render} from 'react-dom'
import {useModel} from '@airma/react-state';

function App(){
    const {state, increase, decrease} = useModel((state:number)=>{
        const baseState = state >= 0? state : 0;
        return {
            state: baseState,
            increase(){
                return baseState + 1;
            },
            decrease(){
                return baseState - 1;
            }
        };
    },0);
    return (
        <div>
            <button onClick={decrease}>-</button>
            <span>{state}</span>
            <button onClick={increase}>+</button>
        </div>
    );
}

render(<App/>, document.getElementById('root'));

It calls the model generate function when component is mounting or the model method has been called everytime.

The example about shows how to use API to manage a step counting model with state. We call increase method to generate a next state, then useAir update this state by recall model generator again.

So, the state change flow of increase is like this:

// model function
const model = (state:number)=>{...};

// increase returns
const state = baseState + 1;
// recall model with what increase returns
return model(state);

Yes, it is close with useReducer, but more free for usage. It looks like agent-reducer too, but it support dynamic closure function style, and it is simple enough.

Try not use async methods, @airma/react-state will not support that, the target of @airma/react-state is supporting react local model, but not eating all codes for platform change. We will support transform state from side effect like async request in other ways.

API

useModel

• model - model generate function, it accepts a state param, and returns a model object, which contains a state, and some methods for generating next state.
• state - this is the default state for model initialization.

returns modelInstance which is generated by calling model(state) everytime when a method is called, and returns a next state.

function useModel<S, T extends AirModelInstance<S>>(
    model: AirReducer<S, T>,
    state: ReturnType<typeof model>['state']
): T

useTupleModel

• model - model generate function, it accepts a state param, and returns a model object, which contains a state, and some methods for generating next state.
• state - this is the default state for model initialization.

returns a tuple like [modelInstance.state, modelInstance].

function useTupleModel<S, T extends AirModelInstance<S>>(
    model: AirReducer<S, T>,
    state: ReturnType<typeof model>['state']
): [T['state'], T]

More usage

The state property is necessary, it can not be ignored, but you can have more properties play like other states for assistant.

import React from 'react';
import {render} from 'react-dom'
import {useModel} from '@airma/react-state';

function App(){
    const {count, isNegative, increase, decrease} = useModel((state:number)=>{
    return {
      state,
      count: state,
      isNegative: state<0,
      increase(){
        return state + 1;
      },
      decrease(){
        return state - 1;
      }
    };
  },0);

  return (
    <div>
      <div>react state ex 1</div>
      <div>
        <button onClick={decrease}>-</button>
          <span style={isNegative?{color:'red'}:undefined}>{count}</span>
        <button onClick={increase}>+</button>
      </div>
    </div>
  );
}

render(<App/>, document.getElementById('root'));

As we can see it is very easy to describe assistant states for usage.

typescript check

@airma/react-state is a typescript support library, you can use it with typescript for a better experience. It checks the input state type is same with param state type, the returning object.state type is same with the param state type, the method returning type is same with param state type, and so on.

End

We hope you can enjoy this tool, and help us to enhance it in future.