Redux Side Effects

Basic Concepts

Stack Overflow: Dispatching Redux Actions with a Timeout
https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Dan Abramov explains the basics of managing async behavior in Redux, walking through a progressive series of approaches (inline async calls, async action creators, thunk middleware).
Stack Overflow: Why do we need middleware for async flow in Redux?
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov gives reasons for using thunks and async middleware, and some useful patterns for using thunks.
"Async Redux workflow: calling actions outside Redux?"
https://www.reddit.com/r/reactjs/comments/4upe9t/async_redux_workflow_calling_actions_outside_redux/d5sgy5s?context=3
A comment explaining why using action creator functions is a good practice
Why doesn't Redux support AJAX out of the box?
https://goshakkk.name/redux-no-ajax-by-default/
Looks at how AJAX calls fit into a Redux application
Adding Customized Asynchrony to Redux
https://anyperk.engineering/im-lauren-and-i-m-a-frontend-apprentice-here-at-anyperk-a1a40106d231
A quick introduction to some of the libraries that can be used to manage asynchronous behavior in Redux.

Thunks

What the heck is a "thunk"?
https://daveceddia.com/what-is-a-thunk/
A quick explanation for what the word "thunk" means in general, and for Redux specifically.
Thunks in Redux: The Basics
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
A detailed look at what thunks are, what they solve, and how to use them.
A Dummy's Guide to Redux and Thunk in React
https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3
A tutorial that shows how to take a React component that does its own data fetching, and rework it to use accept data from Redux and use a thunk action creator instead.
Understanding how redux-thunk works
https://medium.com/@gethylgeorge/understanding-how-redux-thunk-works-72de3bdebc50
An attempt to explain both redux-thunk and Redux's applyMiddleware enhancer, by rewriting the original implementations to add logging and rework names for ease of understanding.
Async Actions with Redux Thunk Demystified
https://blog.jakoblind.no/2017/04/25/async-actions-with-redux-thunk-demystified/
A quick look at the source code for redux-thunk, how it works, and how to use it.
Sense-ible Redux Thunk
https://medium.com/sensehq/sense-ible-redux-thunk-30b866ca5914
Examples of how to define reusable caching and authorization handling for thunks using decorators
Returning promises from Redux action creators
https://medium.com/collaborne-engineering/returning-promises-from-redux-action-creators-3035f34fa74b
Shows how returning a promise from a thunk action creator allows the caller to chain off the promise and execute code after the action creator is complete.
ReactCasts #10: Redux Thunk Tricks
https://www.youtube.com/watch?v=xihoZZU0gao
An excellent screencast that covers three useful tips for use of redux-thunk: thunk return values, multi-dispatch, and when to use getState

Side Effect Approach Comparisons

Redux side effects and you
https://medium.com/javascript-and-opinions/redux-side-effects-and-you-66f2e0842fc3
Thoughts on the proliferation of new side effect libs for Redux, and some comparisons of the commonly used approaches.
"Controversial opinion: redux-thunk is too powerful"
https://twitter.com/intelligibabble/status/800103510624727040
https://twitter.com/dan_abramov/status/800310164792414208
Some discussion on the pros and cons of redux-thunk's flexibility and usage, as well as possible issues with multiple dispatches in a row.
Idiomatic Redux: Thoughts on Thunks, Sagas, Abstractions, and Reusability
https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
A response to several "thunks are bad" concerns, arguing that thunks (and sagas) are still a valid approach for managing complex sync logic and async side effects.
What are the benefits, pros, and cons of redux-thunk over redux-saga? https://hashnode.com/post/what-are-the-benefits-of-redux-thunk-over-redux-saga-what-pros-and-cons-do-they-have-over-each-other-ciqvyydh7065w3g53ffalif61
An excellent discussion of where side effects belong in a Redux app, and how thunks and sagas can be used to handle async logic.
Keeping Redux in check
https://medium.com/@georgeleeme/keeping-redux-in-check-78534504b215
Some tips on use of the Flux Standard Actions convention, and comparison of using redux-thunk vs redux-promise.
The Evolution of Redux Action Creators
https://medium.com/@northerneyes/the-evolution-of-redux-action-creators-2973018bf2ae
A comparison of ways to make action creation testable, looking at redux-thunk, a custom thunk-like middleware, and redux-saga
What is the right way to do asynchronous operations in Redux?
https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/
An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works.
Redux 4 Ways
https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
Side-by-side comparisons of implementing some basic data fetching using thunks, sagas, observables, and a promise middleware
3 Common Approaches to Side-Effects in Redux
https://goshakkk.name/redux-side-effect-approaches/
An overview of what "side effects" are, how they relate to Redux, and the most common ways to handle side effects in a Redux app
Redux Thunks Dispatching Other Thunks - Discussion and Best Practices
https://medium.com/@talkol/redux-thunks-dispatching-other-thunks-discussion-and-best-practices-dd6c2b695ecf
Some excellent thoughts on when it's okay to have a thunk dispatch another thunk, and other possible approaches.
Redux-Observable Epics vs Redux Sagas
https://shift.infinite.red/redux-observable-epics-vs-redux-sagas-8e53610c0eda
A humorous look at how redux-observable and redux-saga compare. It recaps their backgrounds and basic ideas, then shows comparison implementations for some small tasks and rates the approaches.
Async operations in React Redux applications
https://codebrahma.com/structuring-async-operations-react-redux-applications/
An introduction to the complexities of handling async logic in JS, and comparisons of how the same series of API calls could be handled using JS Promises, thunks, sagas, and observables.
"Redux and API/fetch calls. How do you handle them?
https://twitter.com/rem/status/888361414070501376
A Twitter poll asking about people's preferences for handling async work in Redux. The replies are interesting, and show a very wide variety of choices being used.
Understanding redux-saga: from action creators to sagas
https://blog.logrocket.com/understanding-redux-saga-from-action-creators-to-sagas-2587298b5e71
Some short examples comparing implementations of the same fetching logic inside a component, using redux-thunk, and using redux-saga.
Polling with Redux
https://bigbitecreative.com/polling-with-redux/
Compares implementations of a polling loop between redux-saga and redux-observable
Redux-Saga vs Redux-Observable
https://hackmd.io/s/H1xLHUQ8e
Some notes comparing sagas and observables, including "mental models", side-by-side comparison implementations of tasks like fetching / sequencing / cancelation, and more.
Redux Sagas, Observables, oh my
https://spectrum.chat/thread/2e738f7a-b385-4120-aff1-5fca9d1a6f34
An extensive discussion thread that compares the relative uses cases and merits of redux-saga and redux-observable

Sagas

Master Complex Redux Workflows with Sagas
https://konkle.us/master-complex-redux-workflows-with-sagas/
Describes what sagas are, how Redux-Saga uses generators to run sagas, some potential concerns, and how to use them.
Stack Overflow: Why do we need middleware for async flux in Redux?
https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34623840#34623840
A comparison of imperative thunks vs declarative sagas, and some of the benefits that sagas can provide for testing and decoupling of logic.
Managing Side Effects in React + Redux using Sagas
https://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/
Demonstrates various ways to implement a Timer app as a state machine, including using sagas to manage the periodic updates.
Persist Redux State By Using Sagas
https://engineering.invisionapp.com/post/persist-redux-state-by-using-sagas/
A very well-written set of examples showing how to use sagas to implement some complex store persistence logic.
Handling async in Redux with Sagas
https://wecodetheweb.com/2016/10/01/handling-async-in-redux-with-sagas/
Covers the basic concepts and syntax of sagas, and how they can improve testability. (Updated version of a 2015 post, covering the latest version of redux-saga.)
Redux Saga conceptual diagram
https://twitter.com/kuy/status/731484272234663937
A useful diagram illustrating the various things a saga can do
"Redux Sagas benefits?"
https://www.reddit.com/r/reactjs/comments/4ng8rr/redux_sagas_benefits/
Discussion of when and why you might want to use sagas, with some great examples in the comments.
Manage Side Effects Efficiently with Redux Saga
https://youtu.be/QJVdcIlqGwc
A presentation describing the concepts of generators and sagas.
Redux Saga conceptual diagram
https://qiita-image-store.s3.amazonaws.com/0/69860/8cc1a873-c675-9009-570d-9684da4a704f.png
A nifty diagram from @kuy illustrating the general interaction of Redux Saga's async flow operators
Async Operations using Redux-Saga
https://medium.com/@andresmijares25/async-operations-using-redux-saga-2ba02ae077b3
An example of using Redux-Saga to coordinate multiple async calls based on another article's flight data scenario.
Should I use redux-saga or not?
https://speakerdeck.com/kuy/should-i-use-redux-saga-or-not
A presentation from Yuki Kodama, comparing side effect approaches. In Japanese, but still has a number of useful diagrams that can be understood by English speakers.
Interview with Redux-Saga Author Yassine Eloaufi
https://survivejs.com/blog/redux-saga-interview/
An interview with the author of Redux-Saga, where he describes some of its concepts and history
Lazy registration with Redux and Sagas
https://goshakkk.name/lazy-auth-redux-saga-flow/
Examples of using Redux-Saga to implement an async series of user interactions.
A Saga that led Xero to Redux
https://devblog.xero.com/a-saga-that-led-xero-to-redux-aa1361b9a800
Examples of how Xero's async logic for their dashboard evolved over team, from nested callbacks to promises to Redux with sagas
The Three 'R's: Refactoring, React, and Redux for robust async JS
https://devblog.xero.com/the-three-rs-refactoring-react-and-redux-for-robust-async-js-252648a8632f
More information from Xero on how they have used sagas for async workflows, including splitting code up into smaller sagas that can be composed.
4 Quick Tips for Managing Many Sagas in a React-Redux-Saga App
https://decembersoft.com/posts/4-tips-for-managing-many-sagas-in-a-react-redux-saga-app/
Some useful suggestions for structuring and organizing sagas
Implementing feature flags using React and Redux Saga
https://blog.launchdarkly.com/implementing-feature-flags-in-single-page-apps-using-react-and-redux-saga/
A quick example of how to use sagas to manage feature flag API requests
Javascript Power Tools: Redux-Saga
https://formidable.com/blog/2017/javascript-power-tools-redux-saga/
https://formidable.com/blog/2017/composition-patterns-in-redux-saga/
https://formidable.com/blog/2017/real-world-redux-saga-patterns/
A fantastic series that teaches the concepts, implementation, and benefits behind Redux-Saga, including how ES6 generators are used to control function flow, how sagas can be composed together to accomplish concurrency, and practical use cases for sagas.
Managing Side Effects with Redux Saga: A Primer
https://web.archive.org/web/20161112151214/https://www.sigient.com/blog/managing-side-effects-with-redux-saga-a-primer-1
Looks at how side effects complicate testing, and how sagas use descriptions of side effects to make testing easier. Also looks at how sagas fit into a Redux application architecture.
Exploring Redux Sagas
https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee
An excellent article that explores how to use sagas to provide a glue layer to implement decoupled business logic in a Redux application.
Redux-Saga: put() from inside a callback / File Upload Progress
https://decembersoft.com/posts/redux-saga-put-from-inside-a-callback/
https://decembersoft.com/posts/file-upload-progress-with-redux-saga/
A pair of posts demonstrating how to use Redux-Saga's "event channel" feature to interact with non-Redux code
Effects as Data
https://gist.github.com/iammerrick/fc4a677cea11d9c896e8d3a29a184f91
A small essay on the benefits of treating effects as data, and how it enables decoupling
redux-saga factories and decorators
https://medium.com/@TomasEhrlich/redux-saga-factories-and-decorators-8dd9ce074923
Some quick examples of creating reusable sagas to reduce duplicate code
Handling action errors in Redux-Saga using Either
https://medium.com/@jamiedixon/handling-errors-in-redux-saga-using-either-12671bc6cf90
Demonstrates an approach to handling error cases in Flux Standard Actions using the functional programming "Either" concept.
Writing more testable code with Redux-Saga
https://medium.com/grey-frogs/writing-more-testable-code-with-redux-saga-c1561f995225
Gives examples of some sagas for managing complex async query handling logic, and how to use the redux-saga-test-plan library to help test their behavior.
Analytics on easy mode with Redux-Saga
https://goshakkk.name/analytics-easy-redux-saga/
Quick examples of how to use Redux-Saga to implement analytics handling.
Modelling common patterns with redux-saga
https://medium.com/@chanakyabhardwaj/modelling-common-patterns-with-redux-saga-464a380a37ce
Examples of saga logic patterns for behaviors like "first-amongst-these", "keep-doing-until", and "step-by-step".
Redux Saga Retry Patterns
https://medium.com/@bryanfillmer/keep-trying-redux-saga-style-b273882b9ec
https://codeburst.io/try-again-more-redux-saga-patterns-bfbc3ffcdc
A pair of articles discussing ways to handle reconnects, retries, and error handling in sagas.
Redux, Firebase, and the Saga in between
https://medium.com/rumors/redux-firebase-and-the-saga-in-between-c2bd5adf6de1
Discussion and examples of how to use sagas to simplify and generalize interaction with Firebase in a Redux app.
When should I use a saga?
https://medium.com/@felixclack/when-should-i-use-a-saga-708cb3c75e9a
Some quick rules of thumb for determining if building a saga is a good choice for a given feature.
Redux Saga: the Viking way to manage side effects
https://www.slideshare.net/nachomartin/redux-sagas-react-alicante
A comprehensive slideset that covers many aspects of sagas, from basic concepts to use with complex workflows.
Detecting state changes with Redux-Saga
https://goshakkk.name/detect-state-change-redux-saga/
Shows a simple but useful technique for running saga behavior based on state changes rather than just dispatched actions.
Common patterns with Redux-Saga
https://engineering.universe.com/common-patterns-with-redux-saga-ed68f89dfecf
Examples of useful patterns for sagas, including running multiple requests in parallel, using the race keyword to time out requests, and using sagas to manage a queue of events.
States and React: step-by-step user interaction with state machines
https://sandstorm.de/de/blog/post/states-and-react-step-by-step-user-interaction-with-state-machines.html
Demonstrates managing "snackbar" popup notifications using sagas to show and hide the popups
Taming Redux with Sagas
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
A good overview of Redux-Saga, including info on generator functions, use cases for sagas, using sagas to deal with promises, and testing sagas.
Learning Redux Saga: Event Channels with Web Midi https://medium.com/@joeltbond/learning-redux-saga-event-channels-29dee438fd7b
Demonstrates using sagas to interact with the Web MIDI API
May Cause Side Effects: How to Implement Redux Sagas as Middlewares
https://www.javascriptjanuary.com/blog/may-cause-side-effects-how-to-implement-redux-sagas-as-middleware
An extensive article that first implements async functionality with thunks, then walks through how sagas work and refactors the logic to use sagas instead.

Observables

Epic Middleware in Redux
https://medium.com/@kevinsalter/epic-middleware-in-redux-e4385b6ff7c6
Discussion and examples of using Redux-Observable and RxJS to create "epics" which can transform actions.
Action Streams and Redux
https://medium.com/@markusctz/action-streams-and-redux-77f8ac99c2e9
Examples of how Redux-Observable can simplify complex async logic
Using redux-observable to handle asynchronous logic in Redux
https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522
An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation.
Redux Observable to the rescue
https://medium.com/@daslusan/redux-observable-to-the-rescue-b27f07406cf2
A quick comparison of writing some complex AJAX-related logic as a thunk and with redux-observable, and some of the benefits of writing the code using observables.
Using redux-observable for asynchronous actions
https://medium.com/imersotechblog/using-redux-observable-for-asynchronous-actions-1afb31cbc01c
Looks at possible complexities in handling async requests, and how redux-observable can be used to help handle complex async behavior.
Reactive Redux State with RxJS
https://ivanjov.com/reactive-redux-state-with-rxjs/
Describes the concept of "Reactive PRogramming" and the RxJS library, and shows how to use redux-observable to fetch data, along with examples of testing.
Creating and Testing a D3/React Game with Redux-Observable
https://medium.com/@eric.hulburd.af/creating-and-testing-a-d3-react-game-with-redux-observable-d97f2155421c
A detailed look at the concepts and usage of redux-observable. Implements an example game that's built to demonstrate usage in a more meaningful application, and shows how to test epics.
Timing of reducing Actions with Redux-Observable
https://www.bleathem.ca/blog/timing-of-reducing-actions-with-redux-observable/
Breaks down the sequence of behavior when actions are dispatched, how Redux-Observable interacts with that sequence, and gives examples of epics dispatching actions synchronously and asynchronously.
Streaming Redux state as an Observable with RxJS
https://dev.to/fahad19/streaming-redux-state-as-an-observable-with-rxjs-5f48
Examples of how to construct an Observable stream that subscribes to the Redux store state
You Aren't Using Redux with Observables Enough
https://medium.com/@jacobp100/you-arent-using-redux-with-observables-enough-b59329c5a3af
Shows how to use the Redux store as the source for an observable stream, and gives examples of RxJS observable streams that toggle music player behavior and handle async requests that need to be canceled.

Other Side Effect Approaches

Better async Redux
https://blog.scottnonnenberg.com/better-async-redux-i18n-and-node-js-versions/
Comparisons and examples of using Redux-Loop for declarative side effects
A simplified approach to calling APIs with Redux
https://www.sohamkamani.com/blog/2016/06/05/redux-apis/
A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state.
How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects
https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10
A lengthy look at Cycle.js and the redux-cycles library, with plenty of diagrams to illustrate how it handles data flow.
Testing for Race Conditions with Redux
https://paulgray.net/race-conditions-in-redux/
Examples of how to write reducer logic to handle multiple async responses that could return out of order.
Building a React/Redux/Elm Bridge
https://medium.com/javascript-inside/building-a-react-redux-elm-bridge-8f5b875a9b76
Discusses various way to integrate React, Redux, and Elm together, including a Redux middleware that talks to Elm.
Reacting to ProgressEvents with Redux
https://medium.com/@andersonmcook/reacting-to-progressevents-with-redux-355ba021d336
Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents
Redux-loop: A better solution for managing asynchronous operations in Redux
https://lorefnon.tech/2018/02/04/redux-loop-a-better-solution-for-managing-asynchronous-operations-in-redux/
Gives an overview of how Redux-Loop works for handling side effects, and argues that it provides a better approach than sagas or thunks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!