React Redux Toolkit Project with Thunk

Thunk

In this post, we are going to update our redux toolkit project which we had build earlier to use thunk middleware. The previous post can be found here.

We will also be starting with the code from our earlier post. We are going to change all of the logic of API call from Home.js to movieSlice.js and also going to use thunk in it.

So, in movieSlice.js file do the below changes. Here, we are first importing createAsyncThunk from redux toolkit. After that we are exporting a function fetchAsyncMovies and here using createAsyncThunk, in which the first parameter needs the state name which is movies in our case and is followed by fucntion name which is fetchAsyncMovies in our case.

Then we have an async function in which we are doing the API call with axios and finally returning the array of object, which is response.data.results

Now, inside the createSlice, we also have an extraReducers now. It contains the pending, fulfilled and rejected stages of the async call. In the fulfilled we are taking the payload and adding it to the movies array.

movieSlice.js

Now, in our Home.js file we are using the dispatch to dispatched the fetchAsyncMovies() and have removed all logic of API call from here.

Home.js

Our App is working like earlier but we are now going through the thunk stages as shown in the console log.

console

Similarly the Redux store is also showing the two states properly.

Redux store

Now, we will add the logic to fetch the shows as well in movieSlice.js file. We will create a function fetchAsyncShows, which is exactly similar to fetchAsyncMovies. We are just changing the movie to tv in the api call.

We have also added an empty array of shows in initialState. Next, we need to only add new fulfilled stage in extraReducers, because Pending and Rejected are already there.

We have also added a new function getAllShows to get the details of the sows from global state variable.

movieSlice.js

Now, in the Home.js file we will also import the fetchAsyncShows and dispatch it through the useEffect.

Home.js

Now, in MovieListing.js file we will use the getAllShows to get the show details and also add a new section to show the shows.

MovieListing.js

Now in MovieListing.css file we will add the show-list class.

MovieListing.css

Now, in localhost we are also seeing all of the shows.

localhost

Lastly, we will add a bit of hover effect on the cards by adding a hover effect in MovieCard.css file.

MovieCard.css

Now, when we move our mouse over any card, we will see nice hover effect.

Hover effect

This completes our small project and you can find the code for the same here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

We can’t automate alt text. Here are some mistakes, lessons and what we can do for accessibility.

A Washington Post article with VoiceOver in use to show how it reads the featured image alt text

https://youtu.be/p5RobDomh5U

How to get more traffic to your Javascript posts

Image Search App using unsplash API in ReactJS -4

Don’t let unit testing test you

Using esbuild with rails 7 in a simple way

Why is the animation jerky on web page?

10 best practices every Node.js developer must follow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React App with Final Space API — Tinder Style

Implement email authentication with React + RESTful API

React routing using React-router (NPM)

React Redux Example