Using State Machines with React to Make a Confirmation Dialog (2020)

Re:Using State Machines with React to Make a Confirmation Di... by flowerlad on Tuesday February 02, 2021 @10:24PM (#26010254)

This is a good example of how fucked up React can be when you religiously follow 'UI is a function of state' principle.

A dialog should return a promise. Then you can mix confirmation dialog, fetch calls and so on like this:

  private async doTheThing(): Promise {
      try {
         await Confirm("Really do it?); // Promise rejects if user presses No
         const options = await OptionsDialog();
         await makeFetchCall(options);
         await showSuccessDialog();
      }
      catch (ex) {
         showError(ex);
      }
  }

Yes, that's imperative code, which violates React principles. But it is insanely simple compared to typical React code.

[ Parent | on HN ]

Re:Using State Machines with React to Make a Confirmation Di... by pietschy on Tuesday February 02, 2021 @10:58PM (#26010452)

React examples like this always strike me as a great reason to avoid react, but then I'm an old OO dinosaur I suspect.

In our framework (that has angular underneath) we go..

   interactionContext.startActivity(MyConfirmDialog).then(result => ...);

...and the interactionContext handles back button clicks and makes sure the dialog is cancelled and our history is kept clean.

It even works with nested interactions (i.e. the dialog can start a new interaction in place). Again, the user can click the back button repeatedly to back out of the interaction and everything just works.

I've got no idea how you'd do that in React.

edit - fixed typos

[ Parent | on HN ]

Re:Using State Machines with React to Make a Confirmation Di... by mostlylurks on Wednesday February 03, 2021 @12:28AM (#26010889)

>I've got no idea how you'd do that in React.

It's simple, you can place a component that provides dialogs near the root of your component tree and provide async functions which open such dialogs to the descendant components (e.g. via contexts). These functions can then be made to resolve only when the dialogs are closed. Thus, all descendant components can use dialogs in the same manner as shown in your example.

[ Parent | on HN ]

Re:Using State Machines with React to Make a Confirmation Di... by mostlylurks on Wednesday February 03, 2021 @12:23AM (#26010861)

You can still do this with React, though. It's quite easy (and useful!) to have components which implement some dialog which pops up when you call an async function, which only resolves once the user has finished interacting with that dialog. The code could, for example, be essentially identical to your example. It also isn't in contradiction with the nature of React at all, projects that use React are full of imperative code. React just frees you from having to maintain the connection between UI state and your data manually in an imperative manner.

[ Parent | on HN ]

Re:Using State Machines with React to Make a Confirmation Di... by Swizec on Wednesday February 03, 2021 @12:01AM (#26010753)

That’s exactly the API I expose when implementing modals in React. You don’t have to make life complicated.

[ Parent | on HN ]

Re:Using State Machines with React to Make a Confirmation Di... by marcosdumay on Wednesday February 03, 2021 @10:12AM (#26014299)

That's a display, read, react loop. Yes, it's imperative, but this loop is always imperative. Get a FRP GUI toolkit in Haskell and you'll see that loop there, imperative.

The difference between functional and imperative code is there existing more than one such loop available at the same time, and in how your functions are implemented.

[ Parent | on HN ]

Re:Using State Machines with React to Make a Confirmation Di... by underwater on Wednesday February 03, 2021 @06:32AM (#26012696)

What app has a UI that is a series of modal dialogs?

[ Parent | on HN ]