Flux / Redux - How to chain complex actions?

0.md

Flux / Redux chaining actions?

Example scenario

Moderation UI where moderator can do various operations to comments. For example:

• Do operations to single comments, e.g. publish a comment
• Do operations to multiple comments at a time
• Answer to a comment. If the original comment is not published, it will be implicitly published when moderator answers to a comment.

These operations can be categorized to two categories:

Requires only one async call to API:

• Do operations to single comments, e.g. publish or delete a comment

Requires multiple async calls to API and more complex logic:

• Do operations to multiple comments at a time
• Answer to a comment. If the original comment is not published, it will be implicitly published when moderator answers to a comment.

"Primitive" actions

Async actions:

• publishComment(id) Publishes a comment to public.
• createModeratorComment(commentId, newComment) Creates a new moderator comment.

Sync actions:

• showLoader()
• hideLoader()
• lockButtons()
• unlockButtons()

Complex actions which consist of primitive actions

• publishAllComments(commendIds)

  • showLoader()
  • lockButtons()
  • Call publishComment(id) for each comment. Run requests sequentially.
  • unlockButtons()
  • hideLoader()

• answerAndPublish(moderatorComment, originalCommentId)

  • showLoader()
  • lockButtons()
  • Call createModeratorComment(moderatorComment). If it doesn't succeed, show error and stop operation.
  • Call publishComment(originalCommentId)
  • unlockButtons()
  • hideLoader()