React Redux Toolkit with Project

6 min readNov 22, 2021

Redux team recently introduced Redux Toolkit, because Redux have a lot of boilerplate code and it becomes hard sometimes to understand.

We will create a Movie app to understand this new concept of Redux toolkit. So, create a new react app with the below command .

npx create-react-app redux-toolkit-project

Now, React comes with a lot of boiler plate code. So, we will remove these files as shown below.

Now, we will get some errors. So, let’s fix them by removing the unnecessary imports from index.js file.

Now, our App.js will also contain minimal code and will show just a header, as of now.

Now, localhost shows this simple h1 tag.

Now, we will install all of the required packages in our project by the below command.

npm i axios react-redux redux @reduxjs/toolkit react-router-dom@5

Next, we will create four folders in our src and also remove all styles from App.css and put four CSS variables, which we are going to use through out the application.

Now, we are going to use the API from https://developers.themoviedb.org/3/discover/movie-discover to get all movie data. We need to register here for free to get our own API key.

Next, create an apis folder inside the common folder. Here create two files movieApi.js and MovieApiKey.js. In the movieApi.js do the API call to the baseURL through axio.create.

Next, in the file MovieApiKey.js put the details of your API key.

Now, we will create some files in our components folder. They are Footer.js, Header.js, Home.js, MovideDetails.js and PageNotFound.js. We have also created the corresponding css files.

Now, in the file Header.js put the simple content as of now.

Next, put a simple content as of now in Footer.js file.

Next, put a simple content as of now in Home.js file.

Also, put this simple content in PageNotFound.js file.

Also, put this simple content in MovieDetail.js file.

Now, in App.js file we are adding Routing by adding the Header, Home, MovieDetail, PageNotFound and Footer components.

Now, in the Home route we will see these three components in localhost.

Next, we will first add some common style in App.css file. We are also using a google font of Mali here.

Next, we will add the code in Header.js file. Here, we are using a Link and a image of user, which we have just put in the images folder.

Now, we will put the styles for the same in Header.css file. Here, we are using flex box to style our project.

Now, our app is looking good in localhost.

Now, we will also use font awesome in our project. So, we will add the same in our index.html file.

Next, we will create the content for Footer.js file.

The simple styles for the footer file in Footer.css.

Now, create a simple MovieListing.js file and MovieListing.css file in the components folder and put the simple content in MovieListing.js file.

Next, we will update our Home.js file to do an API call using useEffect. We are also showing the MovieListing component here.

Now, in localhost we are able to successfully get the data from our movie db endpoint.

Now, it’s time to add Redux toolkit logic to our project. Inside the features folder, create a movies folder and inside it movieSlice.js file. Also, create a store.js file inside the features folder, and add the below content in it. Here, we are configuring the store with a reducer, which we are going to create soon.

Now, we have to add the store in our index.js file.

In Redux toolkit, we have the reducer and action creator in a single file known as slice which is our movieSlice.js file. Here, we are first importing createSlice from redux toolkit. After that we have an initial state, containing movies array.

Inside the movieSlice, and in the reducers we are creating an action creator called addMovies, which will make the state equal to the payload.

Lastly, we are exporting addMovies and also getAllMovies, through which we can get the movies state.

Next, in our Home.js file we will dispatch the action creator addMovies.

Now, when we goto our localhost and open the redux store, we will see the state.

Now, we will show the data in the MovieListing.js component. Here, we are using the useSelector to get the global state from getAllMovies.

We are receving an array of object here and storing in movies. After that we are looping through it and passing an individual object to the MovieCard component.

Next, we will create the styles for the same in MovieListing.css file. Here, we are using CSS grid to style the container.

Next, create a MovieCard.js file in the same components folder. Here, we are taking the poster_path, title and release_date from the object and showing it within a HTML structure.

Lastly, we are showing the styles for the same in MovieCard.css file.

Our app is now complete and showing all movies with images from API. You can find the code for the same in this github repo.

You can also find this in video format on my YouTube channel.

React Redux Toolkit with Project

Written by Nabendu Biswas