React Redux Toolkit with Project

Photo by Vadim Sherbakov on Unsplash

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.

Delete

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

index.js

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

App.js

Now, localhost shows this simple h1 tag.

localhost

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.

App.css

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.

themoviedb

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.

movieApi.js

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

MovieApiKey.js

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.

Header.js

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

Footer.js

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

Home.js

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

PageNotFound.js

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

MovieDetail.js

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

App.js

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

localhost

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

App.css

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.

Header.js

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

Header.css

Now, our app is looking good in localhost.

localhost

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

index.html

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

Footer.js

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

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.

MovieListing.js

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

Home.js

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

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.

store.js

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

index.js

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.

movieSlice.js

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

Home.js

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

localhost

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.

MovieListing.js

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

MovieListing.css

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.

MovieCard.js

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

MovieCard.css

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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

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

Recommended from Medium

Learn About JavaScript & SSL Introduction

Notice for LOM development progress

Event Handling

How to add images to html in a flask app

Putting together GraphQL microservices

Is It Time To Stop Using React Yet? I’m Afraid Not!

https://computerkedeewane.blogspot.com/2021/05/what-is-wordpad-in-hindi.html

Configuring a middleware with Vue Router

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 Redux Toolkit Project with Thunk

React routing using React-router (NPM)

Implement email authentication with React + RESTful API

Authentication & Authorization in ReactJS