Skip to content
This repository has been archived by the owner on Apr 27, 2024. It is now read-only.

Add SideEffectors #3

Open
schultzcole opened this issue Feb 24, 2020 · 0 comments
Open

Add SideEffectors #3

schultzcole opened this issue Feb 24, 2020 · 0 comments
Assignees

Comments

@schultzcole
Copy link
Collaborator

SideEffectors are objects or systems that react to actions, but are allowed to produce side effects. Unlike reducers, SideEffectors cannot modify state directly, however they can dispatch actions.

SideEffectors should have two method "hooks" into the Store:

  • PreEffect: called immediately when an action is dispatched, before reduction.
  • PostEffect: called after reduction.

Each hook is passed the action that was dispatched, the current state, and an IActionDispatcher.

Architecturally, SideEffectors reduce burden on components by being responsible for side effects, especially asynchrony. For example, a component doesn't need to care about the details of requesting a remote resource, it just needs to care about displaying it.

Here's an example flow for the use case where clicking a button should load a remote image and display it in a component:

  1. Button is clicked and dispatches a ButtonClicked action.
  2. A SideEffector hooks on the ButtonClicked action and initiates a web request for the resource.
  3. Reducer takes the ButtonClicked action and updates state to indicate that the image component is in the 'loading' state.
  4. The image component observes the 'loading' state and displays a loading icon.
  5. The SideEffector receives a response with the requested resource and dispatches another action: ImageLoaded, with the image included.
  6. Reducer takes the ImageLoaded action and updates the image component state to 'loaded' and adds the image to the state.
  7. The image component observes the 'loaded' state, gets the image, and displays it.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant