Redux-Thunk
one minute of reading
Redux-Thunk is a library that allows you to perform asynchronous operations in a Redux-based application. It is one of the most popular Redux extensions that allows you to easily and clearly manage the state of your application.
Redux-Thunk is an add-on to the Redux library. Hosted as a separate package in NPM, it can be downloaded and set up as middleware when initializing Redux without complex configuration. It allows you to achieve asynchronous querying. Middleware in redux allows you to intercept a query and instead of making a single change on the stor it can make a series of queries, in the meantime they can query the API for external data. The whole thing is possible, obtainable without Redux-Thunk, but this one makes it much easier.
An example query in Redux-Thunk
The simplest example of using Redux-Thunk would be to query the API to log in a user. For the query to run correctly, a couple of things need to happen.
- Setting the application state that the login has started.
- Sending the query to the API
- Setting the user data in the store
- Possibly returning an error
export const authLogin = (email, password) => {
return dispatch => {
dispatch(authStart());
axios
.post(`${API_URL}/auth/api/v1/login/`, {
email: email,
password: password
})
.then(res => {
const token = res.data.token;
const user = res.data.user;
dispatch(authSuccess(token, user));
})
.catch(err => {
dispatch(authFail(err));
});
};
};
With this approach, we can isolate some of the logic of our application to a single function. We can use data mocking from the API and fully test the performance of such a Thunk.
Alternatives to Redux-thunk
An alternative to Redux-thunk is the Context API, which is built directly into the React library. We can easily create asynchronous queries there. We will only see a practical difference when the Context API supports a sizable object where we will frequently update parameters. We may find that the Context API is then less efficient and runs DOM updates too often.
Although Redux is a separate library it has rich documentation with well-described examples. Examples for Redux-Thunk are also numerous and it is definitely a productive solution for maintaining application state.
Our offer
Web development
Find out moreMobile development
Find out moreE-commerce
Find out moreUX/UI Design
Find out moreOutsourcing
Find out moreRelated articles
The Manifest Names Boring Owl as one of the Most-Reviewed UX Agencies in Warsaw
22 Jul 2024
When introducing a new digital product or solution, focusing on User Experience (UX) can significantly set you apart from the competition.
![related-article-image-trophy](/_next/image?url=https%3A%2F%2Fd2ooyrflu7lhqd.cloudfront.net%2Fboringowl_io_hand_holding_the_trophy_outside_in_simple_style_b24d5057_eb81_4e93_a106_7af29f7f9c87_1_1_1_715a9cdc84.png%3Fformat%3Dauto&w=3840&q=75)
Website redesign vs. refresh: Evaluating the benefits and drawbacks
11 Jul 2024
In an ever-evolving digital landscape, businesses are constantly called to re-evaluate their online presence. The dilemma often lies in the decision between a complete website redesign or a website refresh. Both actions present unique benefits and challenges. This article aims to dissect these options, highlighting their advantages and disadvantages to better inform your next digital strategy.
How to incorporate machine learning into e-commerce platform
11 Jul 2024
E-commerce thrives on delivering personalized experiences to customers. Harnessing the power of Machine Learning (ML) can redefine these experiences, by predicting user behavior, tailoring recommendations and automating tasks. In this article, we explore the integration of ML into your E-Commerce platform and unveil its transformative potential.
How colours influence website perception?
10 Jul 2024
Bright red sales sign, soothing blue blog post, or an enigmatic black homepage, colors speak volumes in web design. The psychology of colors plays a critical role in how users perceive websites, influencing their actions and decisions subtly shaping the online experience. Let's delve into understanding this colored web of psychology.
Navigating App Development: Web, Mobile or Hybrid?
10 Jul 2024
Embarking on the journey of app development often comes with a critical decision: Web, Mobile, or Hybrid? Each offers unique benefits and challenges, suited to different project demands and goals. This article attempts to navigate through this complex landscape, offering insights to make the best choice.
Crucial role of interruption testing
9 Jul 2024
The rise of digital applications in today's fast-paced world undeniably rests on their performance. But when apps stutter or crash, the culprit can often be traced back to unanticipated interruptions. Understanding this, we delve into the world of 'Interruption Testing', an unsung hero in app performance optimization, which challenges the robustness of applications in the face of unprecedented events and interruptions.
React Native vs Flutter: A comprehensive guide on mobile app development technologies
9 Jul 2024
In the era of mobile app development, choosing the right tech stack becomes crucial. React Native and Flutter, raise as frontrunners with their unique offerings. This article offers an in-depth comparison between the two, aiding you in making informed development decisions.
Show all articles