React Redux Toolkit Project with 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.
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.
Our App is working like earlier but we are now going through the thunk stages as shown in the console log.
Similarly the Redux store is also showing the two states properly.
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.
Now, in the Home.js file we will also import the fetchAsyncShows and dispatch it through the useEffect.
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.
Now in MovieListing.css file we will add the show-list class.
Now, in localhost we are also seeing all of the shows.
Lastly, we will add a bit of hover effect on the cards by adding a hover effect in MovieCard.css file.
Now, when we move our mouse over any card, we will see nice hover effect.
This completes our small project and you can find the code for the same here.
