DEV Community

You're doing state wrong

Nabil Tharwat on June 09, 2024

Implementing component state as a combination of booleans may seem like the easiest way to do it, but let's do something different. Cover by Namro...

Read full post

Alex Lohr • Jun 9

State machines are a nice pattern, but true and false could also make up the entirety of states of a simple state machine. You don't need to make an enum of them.

Jake T. (Vampeyer ) • Jun 9

Can you do a demo so I can refer to the code ?
Thank you sir -

Nabil Tharwat • Jun 10

I added a code example in the Exceptions section of the article. :)

Alex Lohr • Jun 9

const [on, setOn] = useState<Boolean>();
const toggle = () => setOn(o => !o);

I see the author added a part "the exception" and I welcome the addition.

Amin • Jun 10

Although there is no possibility to create an algebraic data type in TypeScript, we could artificially simulate it using a combination of classes and type discrimination in order to get a state that is both predictable, warning impossible states and the possibility to embed state in our "types" (that are really classes in a union).

class FormIdleState { }

class FormSubmittingState {
  public constructor(
    public readonly email: string,
    public readonly password: string
  ) { }
}

class FormErrorState {
  public constructor(public readonly error: Error) { }
}

class FormSubmittedState { }

type State 
  = FormIdleState 
  | FormSubmittingState 
  | FormErrorState
  | FormSubmittedState

function handleState(state: State) {
  if (state instanceof FormIdleState) {
    alert("Please, login in order to access this app");

    // @ts-expect-error Just for the demo, but this is not possible
    console.log(state.email);

    return;
  }

  if (state instanceof FormSubmittingState) {
    alert(`Loggin with email ${state.email}`);
    // TODO: send an HTTP request

    // @ts-expect-error Just for the demo, but this is not possible
    console.log(state.error.message);

    return;
  }

  if (state instanceof FormErrorState) {
    alert(`There has been an error: ${state.error.message}`);

    // @ts-expect-error Just for the demo, but this is not possible
    console.log(state.email);

    return;
  }

  alert("Successfully logged in");
  // TODO: redirect to profile page

  // @ts-expect-error Just for the demo, but this is not possible
  console.log(state.email);
}

// Change me!
const state: State = new FormSubmittingState(
  "email@domain.com",
  "p4ssw0rd"
);

handleState(state);

Note that this example uses TypeScript in order to prevent most human mistakes.

In my opinion, having ADT in TypeScript would remove the need for state machines.

Nabil Tharwat • Jun 10

Definitely one way to look at it. Sadly it's too verbose in TS.

lucas-ayabe • Jun 12

at this point, you should consider using OOP instead of ADTs to solve this, like move the ifs to the respective classes as methods in order to implement something like the State pattern, making the code less verbose.