Skip to content

Latest commit

 

History

History
72 lines (55 loc) · 2.84 KB

redux-saga.md

File metadata and controls

72 lines (55 loc) · 2.84 KB
Raw

Redux Saga

redux-saga ➝ is a library to manage side effects like data fetching, concurrent computations and a lot more. Sebastien Lorber ➝ put it best:

Imagine there is widget1 and widget2. When some button on widget1 is clicked, then it should have an effect on widget2. Instead of coupling the 2 widgets together (i.e. widget1 dispatches an action that targets widget2), widget1 only dispatches that its button was clicked. The saga listens for this button click and then updates widget2 by dispatching a new event that widget2 is aware of.

This adds a level of indirection that is unnecessary for simple apps, but makes it easier to scale complex applications. You can now theoretically publish widget1 and widget2 to different npm repositories. They never have to know about each other, no need for them to share a global registry of actions. The 2 widgets are now bound contexts that can live separately. They don't need each other to be consistent and can be reused in other apps. The saga is the coupling point between the two widgets that coordinates them in a meaningful way for your business.

It is well worth reading the source ➝ of this quote in its entirety.

To learn more about this elegant way to handle concurrent flows, start with the official documentation ➝ and explore some examples. Read this discussion ➝ to compare it against classic redux-thunk.

Usage

Sagas are associated with a container, just like actions, constants, selectors and reducers. If your container already has a sagas.js file, simply add your saga to that. If your container does not yet have a sagas.js file, add one with this boilerplate structure:

import { take, call, put, select } from 'redux-saga/effects'

// Your sagas for this container
export default [
  sagaName
]

// Individual exports for testing
export function* sagaName() {

}

Then, in your routes.js, add injection for the newly added saga:

getComponent(nextState, cb) {
  const importModules = Promise.all([
    System.import('containers/YourComponent/reducer'),
    System.import('containers/YourComponent/sagas'),
    System.import('containers/YourComponent')
  ])

  const renderRoute = loadModule(cb)

  importModules.then(([reducer, sagas, component]) => {
    injectReducer('home', reducer.default)
    injectSagas(sagas.default) // Inject the saga

    renderRoute(component)
  })

  importModules.catch(errorLoading)
}

Now you can add as many sagas as you need to your sagas.js.