redux-side-effects.md

Redux Side Effects

Basic Concepts

• Stack Overflow: Dispatching Redux Actions with a Timeout
  http://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?
  http://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.

• Pure Functionality and Side Effects with Redux
  https://blog.hivejs.org/building-the-ui-2/
  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?"
  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?
  http://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
  http://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

• Softly, Softly, Catch-ee Thunk-y
  https://reergymerej.github.io/blog/redux/2017/12/16/thunk-promises.html
  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
  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
  http://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.

• "Argument: We should switch from thunks to sagas"
  http://en.arguman.org/we-should-switch-from-redux-thunk-to-redux-saga
  An debate flowchart with arguments for and against using thunks and sagas

• 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: Thunk vs Saga
  http://blog.jakegardner.me/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
  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
  http://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?
  http://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
  http://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
  http://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
  http://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
  http://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
  http://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
  http://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
  http://formidable.com/blog/2017/javascript-power-tools-redux-saga/
  http://formidable.com/blog/2017/composition-patterns-in-redux-saga/
  http://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
  http://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".

• Building an event system using Redux and Sagas
  http://blog.servicebot.io/building-our-event-and-user-notification-system-in-express-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
  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
  http://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.

• Elm Architecture with Redux
  https://smallbusinessforum.co/elm-architecture-with-react-redux-redux-loop-645a67070b1a
  A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux

• Redux-cycles
  http://nick.balestra.ch/talk/redux-cycles/#/0
  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
  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