React-truth NPM

Truth

A tiny state manager.

Setup

yarn add react-truth

Basic use

// state.js
import ReactTruth from "react-truth";

export class MyTruth extends ReactTruth {
  public async fetchData(){
    const res = await fetch("https://myapi.com/data");
    const data = await res.json();
    return {
      ...this.state,
      data
    }
  }
  // more actions ...
}

export default new MyTruth();

// Component.js
import appState from "./state";

export default () => {
  const [state, actions] = appState.useState();

  return (
    <>
      <button onClick={actions.fetchUser}>Fetch Data</button>  
      <div>Data: {JSON.stringify(state.data)}</div> 
    </>
  );
};

Advanced (Typescript)

// state.tsx
import ReactTruth from "react-truth";

export class State {
  someValue: string = "initial from state class";
  anotherValue?: string;
}

export class MyTruth extends ReactTruth<State> {
  public async onLoad(): Promise<State> {
    return {
      ...this.state,
      someValue: "mounted"
    }
  }
  public async testAction(newValue): Promise<State> {
    // you can set the state any time you need
    await this.setState({
      ...this.state,
      testActionIsLoading: true
    });

    // you can end this actions setting a state using
    // this.setState as usual or just return a value

    return {
      ...this.state,
      someValue: newValue
    }
  }
}

const initialState = new State();
const settings = {
  persist: true,
  actionsStatus: true
};

export const myTruth = new MyTruth(initialState, settings);

export default myTruth;

// Component.tsx
import appState from "./state";

export default () => {
  const [state, actions] = appState.useState();
  const handleClick = () => actions.testAction(Math.random());

  return (
    <div>
      <button onClick={handleClick}>
        Set a new random value {state.someValue}
      </button>
    </div>
  );
};

Settings

persist:boolean = false

Persist the state in localStorage and recover it when the state starts.

persistanceKey:string = "persisted-state"

Used to name the localStorage item. default.

persistPick:string[] = null

Keys of persisted state members

actionsStatus:boolean = false

Generate automatic values in the state for actions status: state._statusactionName A _status member need to be declared in the state.

// ...
export class State {
  data: object;

  // add this member to your State
  _status: any;
}

export class MyTruth extends ReactTruth<State> {
  public async apiCall(): Promise<State> {
    const res = await fetch("http://api.truth.com/v1/");
    const data = await res.json();
    return {
      ...this.state,
      data
    };
  }
}
// ...

import state from "./state";
import { FIRED, FAILED, COMPLETED } from "react-truth";

export default () => {
  const [state, actions] = state.useState();
  const handleClick = () => actions.apiCall(Math.random());

  return (
    <div>
      <button onClick={handleClick}>
        {state._status.apiCall == FIRED ? (
          <span>The api call is happening</span>
        ) : state._status.apiCall == FAILED ? (
          <span>Something went wrong</span>
        ) : state._status.apiCall == COMPLETED ? (
          <span>Everything went ok!</span>
        ) : (
          <span>nothing happens yet</span>
        )}
      </button>
    </div>
  );
};