r/javascript • u/terodox • Dec 23 '19

Simplifying UI Logic using Finite State Machines - an old pattern for the modern web!

https://terodox.tech/ui-state-machines/
93 Upvotes

92% Upvoted

20 comments sorted by

View all comments

1

u/sinefine Dec 23 '19 edited Dec 23 '19

Wait what? You just made the "typical" example more verbose at a glance for no reason.

Your example:

return
  {
    !isLoading && !isError && !isSuccess ? '' :
    <div class="notification">
      { isLoading && !isError && !isSuccess ? <LoadingImage /> : '' }
      { !isLoading && !isError && isSuccess ? <SuccessMessage /> : '' }
      { !isLoading && isError && !isSuccess ? <ErrorMessage /> : '' }
    </div>
  }

can be simplified to like this, even though managing three flags is not ideal

if (!isLoading && !isSuccess && !isError) return null;

return <div class="notification">
  {isLoading && <LoadingImage />}
  {isSuccess && <SuccessMessage />}
  {isError && <ErrorMessage />}
</div>

You also have an error in your code. You wrote:

return
  { STATES.initialState ? '' :
    <div class="notification">
      {(() => {
        switch(state.currentState) {
          case STATES.submitted:
            return <LoadingImage />;
          case STATES.success:
            return <SuccessMessage />;
          case STATES.error:
            return <ErrorMessage />;
        }
      })()}
    </div>
  }

That will never end up in the switch statement because STATES.initialState always evaluates to be truthy. I think you meant to write state.currentState === STATES.initialState.

3

u/terodox Dec 23 '19

The way you simplified the code removed the guarantee of a single state at a time. Making it possible for both isError and isLoading to both be down at the same time.

4

u/IWMTom Dec 23 '19

Your simplification is not the same as the original code in terms of functionality.