A tiny state manager.
yarn add react-truth
// 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>
</>
);
};
// 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>
);
};
Persist the state in localStorage and recover it when the state starts.
Used to name the localStorage item. default.
Keys of persisted state members
Generate automatic values in the state for actions status: state._status[actionName] 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>
);
};
Log react-truth internals to the console
Any Truth instance has this methods to use or override
Is executed right when the Truth instance is created
Set the state with a new one. It´s async.
A sync state setter.
React hook to plug a component to the state. A list of picked members of the state can be passed as unique param.
HOC to inject the state as props and the actions as action prop. A subset of the state can bi picked using a stateResolver
Check what is happening in the state in the redux devtools.