Skip to content

Instantly share code, notes, and snippets.

@paoloantinori
Last active January 29, 2018 09:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paoloantinori/833cfceec58120adca6f5554acce89b2 to your computer and use it in GitHub Desktop.
Save paoloantinori/833cfceec58120adca6f5554acce89b2 to your computer and use it in GitHub Desktop.
In a nutshell, those components do not fetch data from the API, they just dispatch actions and subscribe to a granular slice of state served by a centralized store which lazy loads more instances of state as required.
The components there are just dummy components that implement ZERO business logic, they just render data, pushed by the Store using the Observer pattern.
When new user interactions happen, the components dispatch actions, which are stringly typed function classes. Those actions are intercepted by a reducer, which inspects the action type and its payload.
The reducer is obvlivious about WHO/WHAT dispatched that action and doesn't care.
It just selects if the action emitted is concerned to it (a web app can have dozens of isolated reducers working in parallel), inspects its payload, saves a snapshot of the state, clones the state, updates it according to the action payload, and replaces the former state snapshot with a new one.
The new state is reported through the store, so all components (ANY component) subscribd to the state can reflect those changes.
That is how Facebook displays a red dot in the envelo icon, even though that component is clueless about notifications and does not end HTTP requests.
Last but not least, this architecture is compounded up with an Effects middleware. It is similar to the reducer in the sense that it listens to actions, and depending on some actions, it can trigger other actions, executing some other logic in the meantime, such as sending HTTP requests somewhere with the payload of the previous actions.
That is how we communicate with the API, for instance. It's not the components which request data. It's the middleware, though, and then it dispatches further actions with the information returned by the AOI, and the action journey begins all over again
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment