@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 useModel 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 state manage, not all. 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 methods for generating next state and any other properties for describing state.
• state - this is the default state for model initialization.

returns modelInstance which is generated by calling model(state). Everytime when a method from modelInstance is called, the result of this method is treated as a next state param, and recalls model(state) to refresh modelInstance.

type AirModelInstance = Record<string, any>;

type AirReducer<S, T extends AirModelInstance> = (state:S)=>T;

type FirstParam<A extends ((p:any)=>any)> = A extends (p:infer P)=>any? P : never;

function useModel<S, T extends AirModelInstance>(
    model: AirReducer<S, T>,
    state: FirstParam<typeof model>
): T

useTupleModel

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

returns modelInstance and the current param state.

type AirModelInstance = Record<string, any>;

type AirReducer<S, T extends AirModelInstance> = (state:S)=>T;

type FirstParam<A extends ((p:any)=>any)> = A extends (p:infer P)=>any? P : never;

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

Tips

The state property of model object is not necessary, it can be ignored, you can have some properties as you wish.

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 {
      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 state properties for usage.

typescript check

@airma/react-state is a typescript support library, you can use it with typescript for a better experience.

It checks if the input state type is same with the param default state type.

If the method returning type is same with param default state type, and so on.

End

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