redux-saga | An alternative side effect model for Redux apps | State Container library

 by   redux-saga JavaScript Version: 1.3.0 License: MIT

kandi X-RAY | redux-saga Summary

kandi X-RAY | redux-saga Summary

redux-saga is a JavaScript library typically used in User Interface, State Container, React applications. redux-saga has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i redux-saga2' or download it from GitHub, npm.

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures. The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well. It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. (if you're not familiar with them here are some introductory links) By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/await, but generators have a few more awesome features we need). You might've used redux-thunk before to handle your data fetching. Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure.

            kandi-support Support

              redux-saga has a medium active ecosystem.
              It has 22452 star(s) with 2035 fork(s). There are 256 watchers for this library.
              There were 1 major release(s) in the last 6 months.
              There are 20 open issues and 1455 have been closed. On average issues are closed in 600 days. There are 3 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of redux-saga is 1.3.0

            kandi-Quality Quality

              redux-saga has 0 bugs and 0 code smells.

            kandi-Security Security

              redux-saga has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              redux-saga code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              redux-saga is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              redux-saga releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              redux-saga saves you 59 person hours of effort in developing the same functionality from scratch.
              It has 154 lines of code, 0 functions and 233 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed redux-saga and discovered the below as its top functions. This is intended to give you an instant insight into redux-saga implemented functionality, and help decide if they suit your requirements.
            • Creates a formatter object .
            • Create a new buffer with the given buffer
            • Runs the saga .
            • Create a new multicast channel with optional arguments .
            • Creates a new RingBuffer buffer from an arbitrary limit .
            • Page demo .
            • Cancel an effect .
            • Execute the next generator
            • Create all child callbacks for a shape .
            • Subscribe to a buffer
            Get all kandi verified functions for this library.

            redux-saga Key Features

            No Key Features are available at this moment for redux-saga.

            redux-saga Examples and Code Snippets

            No Code Snippets are available at this moment for redux-saga.

            Community Discussions


            The unauthenticated git protocol on port 9418 is no longer supported
            Asked 2022-Mar-27 at 13:23

            I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs



            Answered 2022-Mar-16 at 07:01

            First, this error message is indeed expected on Jan. 11th, 2022.
            See "Improving Git protocol security on GitHub".

            January 11, 2022 Final brownout.

            This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
            This will help clients discover any lingering use of older keys or old URLs.

            Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

            As noted by Jörg W Mittag:

            There was a 4-month warning.
            The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

            Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

            Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

            The permanent shutdown is not until March 15th.

            For GitHub Actions:

            As in actions/checkout issue 14, you can add as a first step:



            Cannot Read Property Show of Undefined When Using in React Native
            Asked 2022-Mar-22 at 18:08

            I followed some answers from here that are similar to my issues. But unfortunately, the error is not removed. That is why I asked here again.

            This is an old versioned React Native project where react-native-document-picker version was 2.1.0. When I upgraded the version to 8.0.0, the error shows as the following screenshot:

            The current files are as like below;




            Answered 2022-Mar-22 at 18:08

            The reason you are getting DocumentPicker undefined is the react-native-document-picker version 8.0.0 has been updated since version 2.1.0 which code you've posted.

            According to the library doc, you have to import the DocumentPicker differently. And the util DocumentPickerUtil is also not available to the updated version. For react-native-document-picker version 8.0.0 you have to import in the following way

            import DocumentPicker, { types } from 'react-native-document-picker';

            And also method is no longer available you have to use the DocumentPicker.pick method.




            Update chart with HighchartsReact is not working when a timer is used in React
            Asked 2022-Mar-16 at 20:28

            I have the code to show data on my page using Highchart and React



            Answered 2022-Mar-16 at 08:10

            You should keep your config in the component state and update your data there, just like it is done here:



            '@mui/system' should be listed in the project's dependencies
            Asked 2022-Feb-23 at 10:16

            I have just installed MUI v5.4 in my create react app typescript project and I wanted to import



            Answered 2022-Feb-23 at 10:16

            and @mui/system is in my dependencies in package.json

            I don't see it there. You have @mui/material and @mui/styled-engine-sc, but not @mui/system.

            Do npm install @mui/system to fix this.



            react-native "Export statement may only appear at top level" was working fine until cleaning project how do I find out the issue?
            Asked 2022-Feb-09 at 06:34

            I'm only seeing mention of changes in babelrc etc. online for this message. I've tried to remove the dependency that gives me this error and it appears that then next dependency evaluated returns the same message.

            The error is coming from any/all of my node_modules folder and the code is correct. I'm guessing something has changed w/ versions of something in my dev dependencies but not sure how to track it down...

            I'm using RN 61.5 old I know but this is a production env and can't update atm. Any help on where to look to find the issue please?



            Answered 2022-Feb-09 at 06:34

            we decided to take the big plunge. upgrade the project from rn 61.5 to 67! it only took 2 days ;) wish we would have started there...



            Is functions in redux reducers ok?
            Asked 2022-Feb-08 at 16:34

            I am writing some reducers with Redux-Sagas, Im quite new to this and all reducers we have now dont have any thing like I am about to do. Started to question myself if its the right thing to do.

            In this case I have an INITIAL_STATE thats contains a dataProp, this data has an prop that is an array of users. Now I create a editUser form, when the user is updated I get the updated user back. to update that user in the ReactView I do like this:



            Answered 2022-Feb-08 at 16:32

            Sure, that's totally fine, and in fact we have a docs page on "SplittingReducer Logic" that even talks about that.

            That said, you really should be using our official Redux Toolkit package to write your Redux logic. It will greatly simplify all your Redux code. In particular, it uses Immer to let you write "mutating" syntax in your reducers, and turns that into safe and correct immutable updates. No more object spreads!



            How many methods are there to use React-Redux? Redux-thunk vs Redux-Saga?
            Asked 2022-Jan-27 at 10:17

            I am very confused with Redux as I am learning different methods. I want to know how many more methods are there like redux-Thunk, redux-saga. All of them use a different function like CreateSlice. Which methods are suitable for small projects and what is the main difference between them.



            Answered 2022-Jan-27 at 10:17

            I'd recommend giving the official Redux Style Guide a read.

            Generally: at this moment, there are 14818 redux-themed packages available on npm. It's pretty impossible to name them all ;)

            But also, there are clear recommendations by the Redux team:

            • use Redux Toolkit
            • if you only need api data without further manual logic, use createApi form RTK-Query
            • if you need manual logic attached to that, use createAsyncThunk or just thunks. Only if those are not enough, turn to other middlewares like saga
            • sagas are very overused, most of the time not needed and add unneccesary complexity. We are currently building an action-listener-middleware that covers about 75% of the saga functionality with a simpler api (those 25% functionality left after that are the real saga use case, but probably only 2-5% of users ever need those).
              That said, most people would not even need that and could probably do everything they are using sagas for with thunks instead, which are much more simple.

            There are also other libraries like redux-observable etc. Those have a non-deniable market share in the single-digit percentages, but if you are just getting started, go by the official recommendations.

            Best get started by reading the official Redux Tutorial. It should cover 90% of all the Redux knowledge you'll ever need.



            Getting callbacks from redux-saga
            Asked 2022-Jan-26 at 14:23

            I am triggering a function in saga with Dispatch. Can Saga send me information inside the component after it's done all its work? Actually, I will explain what I want to do with a simple example, don't laugh, please, I am sure this won't work.



            Answered 2022-Jan-26 at 14:23

            The answer you linked is right, the expected way for a saga to communicate back to component is through updating redux store. Adding promises/callbacks is an antipattern, because each action can be handled by 0-n sagas - of course you might know in your case it is just one saga, but the framework doesn't guarantee that in any way and so it can lead to some unexpected issues later on.

            That said, even though it is an antipattern doesn't mean you can't do it.

            The easier way is to add an callback to the action, so e.g.



            How can I add redux-saga to my web extension?
            Asked 2021-Dec-13 at 13:56

            I am working on a project that creates a google chrome extension. I am trying to add redux-saga middleware for using saga debounce. However, I am getting an error that says: Argument type is not assignable of type 'Store'. How can I fix that and How should I do that? There are not various example in the internet in web extension with middleware. Thanks for your time. Here is my code:

            in background.ts



            Answered 2021-Dec-13 at 13:50

            applyMiddleware should contain only middlewares (not the store) and be passed as an argument to the createStore function:



            When to use Redux-saga / Redux thunk and when not not?
            Asked 2021-Dec-12 at 22:49

            to be honest I know when to use Redux and the global state, but I have been seeing a lot of codebases which are using Redux-Saga or Thunk for almost all the api calls everything is being saved on the global state of the store and all api calls are going through actions or generators

            I have always thought that Redux should be used only to fetch data needed globally but so far I'm seeing a whole different concept and I don't know which is better? does one have advantages over another?

            To Clarify again; this is not a Redux Thunk vs Saga Question and when to use what

            this is a when to call apis using either and store data in the store vs just using a regular function in say a useEffect hook and using useState to render the effects of the data coming from that api I feel that over using the global state to manage every piece of state in the app is just beyond the concept of global state and might also be bad for performance but I have worked with apps where they are using Redux for everything regardless of the need for it so If I have Redux installed in my app, does this mean all api calls go through middleware regardless

            I mean from a design pattern point of view



            Answered 2021-Dec-12 at 22:49

            The question is if api data is local - and most of the time it is not, or at least if can become global over time.

            Assume you have a user profile. You show it only in a top right indicator.

            Now later, you add a user profile page. And you keep that data local, too.

            Now you have two places with the data and once it changes in one place, it will not automatically update in the other - data is running out of sync.

            That's why it is a sensible choice to always treat server side data as global data. That doesn't mean you necessarily need to use Redux there - libraries like SWR or React Query can do a good job at that as well. And if you're using Redux, it doesn't mean that you need to hand-write thunks. The official Redux-Toolkit comes with RTK Query, which takes care of that for you.

            Mind though, that using saga for api fetching is almost always "oversized". Sagas are great at managing very individual complicated data flows - but fetching data is hardly complicated. It's pretty much a solved problem. That's why Redux Toolkit includes thunks by default and we recommend thunk by default in the Redux Style Guide

            On how we officially recommend dealing with apis, I'd suggest you take a look at the official Redux Tutorial - in chapter 5 it covers handling that by hand with thunk and in chapters 7 and 8 it shows how to work with RTK Query.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install redux-saga

            Alternatively, you may use the provided UMD builds directly in the <script> tag of an HTML page. See this section.
            There is also a umd build of redux-saga available in the dist/ folder. When using the umd build redux-saga is available as ReduxSaga in the window object. This enables you to create Saga middleware without using ES6 import syntax like this:. The umd version is useful if you don't use Webpack or Browserify. You can access it directly from unpkg.


            IntroductionBasic ConceptsAdvanced ConceptsRecipesExternal ResourcesTroubleshootingGlossaryAPI Reference
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i redux-saga

          • CLONE
          • HTTPS


          • CLI

            gh repo clone redux-saga/redux-saga

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link