State Machine

This is simple state for logic use to xstate lib

Install

npm i trido95-xstate-react@latest

Usage

1. First, declare the types to use the state machine according to the specified rules.

1/**
2 * type.ts
3 */
4export type TContext = {
5  profile: {
6    userName: string;
7    fullName: string;
8  };
9  userName: string;
10  passWord: string;
11};
12export type TEvent = {
13  type: "SET_USERNAME" | "SET_PASSWORD" | "LOGIN";
14};
15export type TState = "login" | "connect" | "done" | "error";

2. Next, create a desired scenario. This scenario will be your logical construction, helping to build the login (UX) separately from the view (UI) quickly and efficiently, making it easy to apply and reuse.
3. Some notes as follows: Config is a function for you to use to create the scenario. Objects such as actions, guards, and services are there for you to write and test your logic.

1/** logic.ts */
2import { Config, assign, createStateMachine } from "baotri95.dev/machine";
3import { TEvent, TState, TContext } from "type";
4const services = {
5  apiLogin: async (context) => await "call api",
6};
7const actions = {
8  // logic function
9  // example
10  setPass: assign({
11    passWord: (ctx, e) => e.passWord,
12  }),}
13};
14const guards = {
15  // validate function
16  checkEmpty: (ctx) => ctx.userName.length && ctx.passWord.length
17};
18const stateConfig = Config<TContext, TState, TEvent>({
19  id: "login",
20  context: {
21    profile: {
22      userName: "",
23      fullName: "",
24    },
25    userName: "",
26    passWord: "",
27  },
28  initial: "login",
29  states: {
30    login: {
31      on: {
32        SET_USERNAME: {
33          actions: assign({
34            userName: (ctx, e) => e.userName, // ,
35          }),
36        },
37        SET_PASSWORD: {
38          actions: ['setPass'] // call setPasss to actions, actions is string, array or a function concept. ('setPass', ['setPass', 'setPass1'])
39        },
40        LOGIN: {
41          target: "connect",
42          cond: 'checkEmpty' // call checkEmpty to guards
43        },
44      },
45    },
46    connect: {
47      invoke: {
48        src: "apiLogin",
49        onDone: {
50          target: "done",
51          actions: assign({
52            profile: (ctx, e) => e.data,
53          }),
54        },
55        onError: {
56          target: "error",
57        },
58      },
59    },
60    done: {},
61    error: {},
62  },
63});
64export const LoginMachine = () => createStateMachine<TContext, TEvent>(stateConfig, {
65  services,
66  actions,
67  guards,
68});

4. Finally, create the UI (ReactJS) to effectively use the state machine. Good luck!

1/**
2 * Login.tsx
3 */
4import { LoginMachine } from "logic";
5
6export function Login() {
7  const LoginState = LoginMachine()
8  const context = LoginState.context;
9  return (<div>
10     {
11     LoginState.matches('login') &&
12      <div>
13       <div> <h5>Login</h5></div>
14        <div>
15         <label>User Name</label>
16          <input name="userName" onChange={e => LoginState.sendEvent('SET_USERNAME', {userName: e.target.userName})}/>
17        <div>
18       <div>
19        <label>User Name</label>
20         <input name="passWord" onChange={e => LoginState.sendEvent('SET_PASSWORD', {passWord: e.target.passWord})}/>
21        <div>
22        <div>
23              <button onClick={LoginState.sendEvent('LOGIN')}>LOGIN</button>
24        </div>
25    </div>
26  }
27  {
28 LoginState.matches('done') &&
29    <div>
30       <div>Profile</div>
31       <div>{context.profile.fullName}</div>
32    </div>
33     }
34  </div>)
35  ;
36}

The structure of the state machine to use

1logic/
2  type.ts
3  actions.ts
4  guards.ts
5  services.ts
6  state.ts
7  index.ts
8view/
9  index.tsx