Understanding Redux saga, Redux Promises and Thunk

TLDR:

Goal: As Redux Actions work on local Store, they’re be design Synchronous. Now if we want to do some async action before calling Redux Action, we use below styles:

  • Write Async stuff in component/svc and once resolved, call Action
    • This tightly binds the component with logic and makes testing difficult
    • Components should be stateless
  • Redux Thunk:
    • Create a Action Creator (AC), that the component will call instead of dispatching Action Directly.
    • This AC will return a function to the caller that contains the pre Action async logic (using promises) and finally uses .then to dispatches the Action
  • Redux Promise:
    • Enhances the Dispatch call to take a promise as Payload.
    • It optionally takes error as well
    • It then makes sure that the Action is called only when the promise resolves, with the data that the promise returns
  • Redux Saga
    • Uses generators instead of Promises for async actions before calling store action

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s