Redux Observable Loops

You can make redux complicated but at the most fundamental level, you have a view layer that lets you fire actions that can update the state. There is middleware and actions hit reducers which update the store, but let’s consider those implementation details. Practically speaking, it’s a tiny action loop where View > Action > State.

Redux observable introduces a separate action loop that runs alongside the tiny loop. The view layer lets you fire actions that trigger epics, which can fire off more actions, that can update the state. So it’s View > Action > Epic > Action > State.

This diagram helped me put all this all together.

PNG image-0FBFB8DA8517-1.png

A few important details:

  1. All actions will run through the tiny loop before they run through the epic loop.
  2. All Epics must return an action or it’s doom.
  3. If your epic returns the same action it received, you will create an infinite loop of doom.
  4. If your epic returns an uncaught error its doom again.

Resources #

 
2
Kudos
 
2
Kudos

Now read this

Using Redux Observable For Async Stuff

Redux doesn’t handle async work too well. Thunk is the go-to solution, but it’s not always great for testing. Here is how to do a basic async data fetch with redux observable; export const exampleEpic = (action$, state$, { later }) =>... Continue →