Redux Side Effects
Stack Overflow: Dispatching Redux Actions with a Timeout
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?
Dan Abramov gives reasons for using thunks and async middleware, and some useful patterns for using thunks.
Pure Functionality and Side Effects with Redux
An overview of what side effects are, how they fit into Redux, and several approaches for managing them.
"Async Redux workflow: calling actions outside Redux?"
A comment explaining why using action creator functions is a good practice
Why doesn't Redux support AJAX out of the box?
Looks at how AJAX calls fit into a Redux application
Adding Customized Asynchrony to Redux
A quick introduction to some of the libraries that can be used to manage asynchronous behavior in Redux.
What the heck is a "thunk"?
A quick explanation for what the word "thunk" means in general, and for Redux specifically.
Thunks in Redux: The Basics
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
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
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
A quick look at the source code for redux-thunk, how it works, and how to use it.
Sense-ible Redux Thunk
Examples of how to define reusable caching and authorization handling for thunks using decorators
Returning promises from Redux action creators
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
An excellent screencast that covers three useful tips for use of redux-thunk: thunk return values, multi-dispatch, and when to use
Softly, Softly, Catch-ee Thunk-y
Thoughts on how to handle errors inside of thunks, and why you shouldn't end a thunk by catching thrown errors.
Side Effect Approach Comparisons
Redux side effects and you
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"
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
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
Some tips on use of the Flux Standard Actions convention, and comparison of using redux-thunk vs redux-promise.
"Argument: We should switch from thunks to sagas"
An debate flowchart with arguments for and against using thunks and sagas
The Evolution of Redux Action Creators
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?
An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works.
Redux 4 Ways
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
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: Thunk vs Saga
A couple quick examples showing how to use thunks and sagas for the same task
Redux Thunks Dispatching Other Thunks - Discussion and Best Practices
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
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
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?
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
Some short examples comparing implementations of the same fetching logic inside a component, using redux-thunk, and using redux-saga.
Polling with Redux
Compares implementations of a polling loop between redux-saga and redux-observable
Redux-Saga vs Redux-Observable
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
An extensive discussion thread that compares the relative uses cases and merits of redux-saga and redux-observable
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?
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
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
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
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
A useful diagram illustrating the various things a saga can do
"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
A presentation describing the concepts of generators and sagas.
Redux Saga conceptual diagram
A nifty diagram from @kuy illustrating the general interaction of Redux Saga's async flow operators
Async Operations using Redux-Saga
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?
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
An interview with the author of Redux-Saga, where he describes some of its concepts and history
Lazy registration with Redux and Sagas
Examples of using Redux-Saga to implement an async series of user interactions.
A Saga that led Xero to Redux
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
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
Some useful suggestions for structuring and organizing sagas
Implementing feature flags using React and Redux Saga
A quick example of how to use sagas to manage feature flag API requests
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
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
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
A pair of posts demonstrating how to use Redux-Saga's "event channel" feature to interact with non-Redux code
Effects as Data
A small essay on the benefits of treating effects as data, and how it enables decoupling
redux-saga factories and decorators
Some quick examples of creating reusable sagas to reduce duplicate code
Handling action errors in Redux-Saga using Either
Demonstrates an approach to handling error cases in Flux Standard Actions using the functional programming "Either" concept.
Writing more testable code with Redux-Saga
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
Quick examples of how to use Redux-Saga to implement analytics handling.
Modelling common patterns with redux-saga
Examples of saga logic patterns for behaviors like "first-amongst-these", "keep-doing-until", and "step-by-step".
Building an event system using Redux and Sagas
Some quick examples of using Redux-Saga in a Node Express app to handle processing for things like sending emails.
Redux Saga Retry Patterns
A pair of articles discussing ways to handle reconnects, retries, and error handling in sagas.
Redux, Firebase, and the Saga in between
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?
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
A comprehensive slideset that covers many aspects of sagas, from basic concepts to use with complex workflows.
Detecting state changes with 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
Examples of useful patterns for sagas, including running multiple requests in parallel, using the
racekeyword to time out requests, and using sagas to manage a queue of events.
States and React: step-by-step user interaction with state machines
Demonstrates managing "snackbar" popup notifications using sagas to show and hide the popups
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
An extensive article that first implements async functionality with thunks, then walks through how sagas work and refactors the logic to use sagas instead.
Epic Middleware in Redux
Discussion and examples of using Redux-Observable and RxJS to create "epics" which can transform actions.
Action Streams and Redux
Examples of how Redux-Observable can simplify complex async logic
Using redux-observable to handle asynchronous logic in Redux
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
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
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
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
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
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
Examples of how to construct an Observable stream that subscribes to the Redux store state
You Aren't Using Redux with Observables Enough
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
Comparisons and examples of using Redux-Loop for declarative side effects
A simplified approach to calling APIs with Redux
A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state.
Elm Architecture with Redux
A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux
A slideshow that describes the basics of Cycle.js, and how the redux-cycles library can be used to handle side effects in Redux
How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects
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
Examples of how to write reducer logic to handle multiple async responses that could return out of order.
Building a React/Redux/Elm Bridge
Discusses various way to integrate React, Redux, and Elm together, including a Redux middleware that talks to Elm.
Reacting to ProgressEvents with Redux
Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents
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.