Need advice about which tool to choose?Ask the StackShare community!

redux-saga

424
348
+ 1
8

Redux.js vs redux-saga: What are the differences?

Redux.js and redux-saga are both important libraries used in JavaScript applications for managing state. While Redux.js is a library for managing the state of JavaScript applications, redux-saga is a middleware library for handling side effects in Redux.js applications. While both libraries are used in conjunction with each other, there are key differences between them.

  1. Action dispatching: In Redux.js, actions are dispatched directly to the reducers, which update the state synchronously. On the other hand, in redux-saga, the actions are dispatched to sagas, which are separate from reducers. Sagas handle the side effects asynchronously, making it possible to do complex tasks like making API calls, delay actions, or listen for multiple actions.

  2. Flow control: Redux.js follows a synchronous flow control model, where actions are processed immediately. On the other hand, redux-saga provides a more advanced flow control mechanism by allowing the use of generators and the yield keyword. This provides better control over asynchronous actions and makes it easier to handle complex asynchronous logic.

  3. Testing: In Redux.js, testing can be straightforward as actions and reducers can be tested independently. In redux-saga, testing can be more complex as sagas are often tightly coupled with asynchronous actions. However, redux-saga provides testing utilities that can help with unit testing the sagas and mocking the effects.

  4. Complexity: Redux.js is simpler and easier to understand compared to redux-saga. The concepts and principles of Redux.js are more straightforward and widely understood by developers. On the other hand, redux-saga introduces additional complexity with the use of generators, sagas, and the yield keyword. This can make the codebase harder to grasp for less experienced developers.

  5. Error handling: Redux.js doesn't provide a built-in mechanism for handling errors in asynchronous actions. Error handling needs to be implemented manually within the reducers or actions. In contrast, redux-saga provides built-in error handling capabilities. Sagas can catch errors, perform recovery logic, and dispatch appropriate actions to update the state accordingly.

  6. Extensibility: Redux.js provides a simple and flexible architecture, making it easy to extend and integrate with other libraries. Redux middleware can be used to add extra functionality to the store. Redux-saga, on the other hand, provides a more specialized solution for handling side effects. It is specifically designed for use with Redux.js and provides powerful functionality for handling complex asynchronous operations.

In summary, Redux.js is a library for managing the state of JavaScript applications, while redux-saga is a middleware library for handling side effects in Redux.js applications. Redux.js follows a synchronous flow control model, is simpler, and easier to understand. On the other hand, redux-saga provides advanced flow control, error handling capabilities, and extensibility but introduces additional complexity.

Decisions about and redux-saga
Le Thanh
Why Electron over macOS
  • Since this is a very early stage, so I want to verify the hypothesis so that I go with Electron. It will help you build faster, cross-native app but the trade off is the performance. It's ok, if the app is get product-market fit, we will plan to move it to Native platform to bring high performance for users
Why Recoiljs over Redux or something else Why not Redux? Zustan? DVA?
  • The boilderplace is so fukin hard. Besides, it really hard for optimizing to only render a component that subscribes to a sub-tree state. I need to use selector, memorize, immutable, ...
Why not MobX? MST?
  • It has been a long time since I last use Mobx, MST. It's cool, but now the world has changed a lot, no more Class component, so I don't know it supports a lot.
  • One more thing I don't want to use MobX is that the API is changed a lot in each major version. No! I don't want to use an outdated library for the rest of my life
  • I feel can not control how Component will render when I use MobX
Why Recoil?
  • It solves my concern, each component is subscribed to a very small state object (called atom) and only render once they changed
  • It plays nice with Functional Component. You can easily change useState to useRecoilState and vice versa. It's cool because "Alway use local state, only move it to global once needed"
  • I can map the product concept to state in my brain. A cell in a table should be an atom so that the cell will render on its own.
See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of redux-saga
  • 7
    Easy to test
  • 1
    Easy to learn

What is redux-saga?

An alternative side effect model for Redux apps

Need advice about which tool to choose?Ask the StackShare community!

Jobs that mention and redux-saga as a desired skillset
What companies use redux-saga?
See which teams inside your own company are using redux-saga or undefined.
Sign up for StackShare EnterpriseLearn More

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with redux-saga?

Blog Posts

JavaScriptGitHubReact+12
5
4149
Oct 11 2019 at 2:36PM

LogRocket

JavaScriptReactAngularJS+8
5
1982
JavaScriptGitHubNode.js+29
14
13515
GitHubPythonReact+42
49
40806
GitHubPythonNode.js+47
55
72476
What are some alternatives to and redux-saga?
Cycle.js
A functional and reactive JavaScript framework for predictable code
MobX
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Flux
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
React
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
RxJS
RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
See all alternatives