This is the file where all the async calls/side-effects are being handled. next ( ) ) // from "./ducks/reducer" Įxport default connect(mapStateToProps, null)(App) It is denoted with an asterisk in front of the function keyword.Ĭonsole. What is a Generator function?Ī generator function is a function that can be paused and later resumed while retaining its variable bindings(context). Both of which are difficult or impossible using redux-thunk. Generators are a powerful concept, which you might not use every day in programming but its strengths were leveraged to create Redux-saga, which then gives users the ability to write asynchronous code in a synchronous manner, thereby eliminating problems with callbacks(callback hell), as well as helps to run side-effects in parallel, cancel them, etc. Redux-saga is built on the concept of generators which was introduced as part of the ECMAScript 2015 module. Now we will do a deep dive into Es6 generators and Redux-saga, then we will build a trivial application using redux-saga middleware. Redux-saga also allows us to write async code in a declarative manner hence it is more readable and easier to test. This complex situation is where a middleware like redux-saga thrive, it helps you handle these easily using special function called effects provided by redux-saga. It doesn’t provide any way to handle advanced async operations like cancellation and debouncing.ĭespite its negatives, Redux-thunk remains the most used redux middleware for handling side-effects, and it works for most use-cases, but it doesn’t work in complex applications where you might want to cancel an API request after an action has been dispatched, or you want to debounce a function call.It can become difficult to read and understand when you start dealing with complex async login in complex applications.It is easy to learn unlike redux-saga(which we will be covering later in this article) because you don’t need to learn new JavaScript concepts to use it.The business logic is not tightly coupled to the UI components so it can be reused by components. ![]() Using a middleware like redux-thunk has its benefits: ![]() Here, we have the fetch user API call in the action creator, so any component that needs to fetch a user can dispatch the requestUser() action instead of duplicating logic.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |