This content originally appeared on DEV Community and was authored by Hiep Le
Click ⭐ if you like the project. Pull Requests are highly appreciated ❤️
Github link: https://github.com/hieptl/netflix-clone/tree/main/advanced/netflix-thunk
I'm Hiep. I work as a full-time software engineer. Most of my open-source projects are focused on one thing - to help people learn ?.
The repository helps you learn Redux Thunk by building Netflix. It means that you are learning Redux Thunk by building a real-life project. I will explain concepts in details. This post is the third part in my series and it is suitable for beginners.
If you feel the repository is useful, please help me share the post and give me a Github ⭐. It will make me feel motivation to work even harder. I will try to make many open sources and share to the community.
Preface
This course will help you to learn Redux Thunk by building Netflix. It means that you are learning by doing a real-life project.
Table of Contents
| No. | Topics |
|---|---|
| 0 | How to Run the Project. |
| 1 | Live Demo. |
| 2 | Introduction about the Creator. |
| 2.1 | Greenwich University. |
| 2.2 | Hitachi Vantara Vietnam. |
| 3 | Prequisites. |
| 3.1 | Softwares. |
| 3.2 | Technical Skills. |
| 3.3 | Materials. |
| 4 | Purposes of the Course. |
| 4.1 | Final Project. |
| 4.2 | Job. |
| 5 | Redux Middeware. |
| 5.1 | What. |
| 5.2 | Why. |
| 5.3 | How. |
| 5.4 | When. |
| 6 | Redux Thunk. |
| 6.1 | What is Thunk Function. |
| 6.2 | What is Redux Thunk. |
| 6.3 | Differences between Redux Thunk and Redux Saga. |
| 7 | Apply Redux Thunk to Netflix. |
| 8 | Conclusion. |
| 9 | References. |
Table of Images.
0. How to Run the Project.
Step 1: Clone the project by using git clone or download the zip file.
Step 2: Open "terminal" / "cmd" / "gitbash" and change directory to "netflix-clone" and run "npm install" to install dependencies.
Step 3: Run "npm start" to run the fron-end project.
1. Live Demo.
- https://71cv0.csb.app/login
- Username: demo@gmail.com
- Password: 123456
The login function was implemented by using Redux and Redux-Thunk. You can try to use the account above in order to test the feature. The result will be shown on the console log.
2. Introduction about the Creator.
2.1. Greenwich University.
GPA 4.0 / 4.0.
Machine Learning paper - Recommendation System - IEEE/ICACT2020.
Co-Founder / Mentor IT club.
2.2. Hitachi Vantara Vietnam.
Employee of the year.
Second prize - innovation contest.
Techlead - HN branch.
One of CoE Leaders (Center of Excellence).
3. Prequisites.
3.1. Softwares.
Install NodeJS.
An IDE or a text editor (VSCode, Intellij, Webstorm, etc).
3.2. Technical Skills.
Basic programming skill.
Basic HTML, CSS, JS skills.
Basic React skill. (If you want to learn about React, you can refer Learn React by Building Netflix: https://dev.to/hieptl/learn-react-by-building-netflix-1127).
Basic Redux skill. (If you want to learn about Redux, you can refer Learn React & Redux by Building Netflix: https://dev.to/hieptl/learn-react-redux-by-building-netflix-bd5).
3.3. Materials.
Html, css, js (source code) was prepared because I want to focus on React and share knowledge about React. Building html and css from scratch would take a lot of time.
README.md (the md file will contain everything about the course).
Netflix data will be used to import to Firebase. In this course, we use Firebase as our back-end service.
4. Purposes of the Course.
4.1. Final Project.
The course would help you have understanding about React and Redux Thunk.
You could build the final project with end-to-end solution (front-end solution using React and back-end solution using Firebase).
4.2. Job.
- After finishing the course, you could get a job with fresher / junior position.
5. Redux Middleware.
Figure 1. Redux Middleware.
5.1 What.
- Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.
5.2 Why.
Redux middleware were designed to enable writing logic that has side effects.
Middleware like Redux Thunk or Redux Promise just gives you “syntax sugar” for dispatching thunks or promises
5.3 How.
- In order to use Redux Middleware in your application, you need to import and use applyMiddleware function from redux. It will help you to apply midllewares in your application.
5.4 When.
Redux middleware is suitbale for medium or large applications.
It help you to separate the business code and the view.
Redux middleware were designed to enable writing logic that has side effects. As what mentioned, a Redux middleware can do anything when it sees a dispatched action: log something, modify the action, delay the action, make an async call, and more. Also, since middleware form a pipeline around the real store.
6. Redux Thunk.
6.1. What is Thunk Function.
- A thunk is just a function which delays the evaluation of the value. It doesn’t take any arguments but gives the value whenever you invoke the thunk. i.e, It is used not to execute now but it will be sometime in the future. Let's take a synchronous example,
const add = (x,y) => x + y;
const thunk = () => add(2,3);
thunk() // 5
6.2. What is Redux Thunk.
Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store's abilities, and lets you write async logic that interacts with the store.
Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.
6.3. Differences between Redux Thunk and Redux Saga.
| Redux Thunk | Redux Saga | |
|---|---|---|
| Advantages | Simple, strong, easy to use, it is suitable for beginners | It is suitable for large scale applications. It helps us to write cleaner code and test the code easier when comparing with Redux Thunk |
| Disadvantages | It is suitable for small applications. | There is a learning curve for beginners and it is not suitable for small applications. |
7. Apply Redux Thunk to Netflix.
Figure 2. Apply Redux Thunk to Netflix.
It is time to understand how Redux Thunk works by applying it to our Netflix application. In the first part of this series, we built the login function. However, we just wrote a function to call Firebase authentication service when clicking on "Sign In" button. It is time to change the code by using Redux-Thunk.
Step 1: We need to install redux-thunk by running npm install redux-thunk.
Step 2: Update store.js file with the following code.
// import create store.
import { createStore, applyMiddleware } from "@reduxjs/toolkit";
// import root reducer.
import rootReducer from "./reducers";
// import thunk
import thunk from "redux-thunk";
export default createStore(rootReducer, applyMiddleware(thunk));
1st NOTE:
We import thunk from redux-thunk.
As mentioned above, in order to apply redux middleare in our application, we need to use applyMiddleware. In this case, it accepts thunk as the first parameter.
Step 3: We need to create services folder, this folder is used to store services in the application. Services will take responsibility to interact with back-end services.
Step 4: We are building the login feature. Therefore, we need to create AuthService.js file in services folder. This file will interact with back-end services which are related to auth functions.
// import firebase auth.
import { firebaseAuth } from "../firebase/firebase";
export const login = async ({ email, password }) => {
try {
return await firebaseAuth.signInWithEmailAndPassword(email, password);
} catch (error) {
console.log(error);
}
};
2nd NOTE:
We need to call Firebase authentication service. That's why firebaseAuth will be imported.
login function accept email, password as parameters. It will be used in the following section.
It is time to create a login action (redux action). The login action will be dispatched when clicking "Sign In" button.
- Step 5: Create AuthActions.js in actions folder.
// import auth service.
import * as authService from "../services/AuthService";
// import action types.
import * as loadingActionTypes from "../actions/LoadingActions";
export const login = ({ email, password }) => async (dispatch) => {
try {
dispatch({ type: loadingActionTypes.SHOW_LOADING });
const userCredentials = await authService.login({ email, password });
if (userCredentials) {
console.log(userCredentials);
}
dispatch({ type: loadingActionTypes.HIDE_LOADING });
} catch (error) {
console.log(error);
}
};
3rd NOTE:
In AuthActions.js file, we create a thunk function which is called login.
In some cases, we need to dispatch other actions inside the current action. Therefore, dispatch is used to achieve that.
We are dispatching actions to show Loading component before calling Firebase authentication service and hide it after calling the service.
- Step 6: Replace LoginForm.js file with the following code.
/**
* Github: https://github.com/hieptl/netflix-clone.
* Dev.to: https://dev.to/hieptl/learn-react-by-building-netflix-1127
*/
// import react.
import { useState } from "react";
// import useDispatch to dispatch action to the store.
import { useDispatch } from "react-redux";
// import actions.
import * as authActions from "../../actions/AuthActions";
/**
* create LoginForm component.
*/
function LoginForm() {
// create email and password state to store user's credentials.
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const dispatch = useDispatch();
/**
* handle event when the user clicks on "Login" button.
*/
const login = () => {
dispatch(authActions.login({ email, password }));
};
/**
* update email state when the user inputs the email field.
* @param {*} e - synthetic event to get the latest email's value.
*/
const onEmailChanged = (e) => {
// get email value.
const updatedEmail = e.target.value;
// update email state.
setEmail(() => updatedEmail);
};
/**
* update password state when the user input the password field.
* @param {*} e - synthetic event to get the latest password's value.
*/
const onPasswordChanged = (e) => {
// get password value.
const updatedPassword = e.target.value;
// update password state.
setPassword(() => updatedPassword);
};
return (
<div className="login-body">
<div className="login-body__form">
<h1>Sign In</h1>
<div className="login-body__input mb-16">
<input
type="text"
placeholder="Email or phone number"
onChange={onEmailChanged}
/>
</div>
<div className="login-body__input">
<input
type="password"
placeholder="Password"
onChange={onPasswordChanged}
/>
</div>
<button className="login-body__submit-btn" onClick={login}>
Sign In
</button>
<div className="login-body__options">
<span>Remember me</span>
<span className="login-body__need-help">Need help?</span>
</div>
<div className="login-body__footer">
<div className="login-body__fb">
<img
src="https://assets.nflxext.com/ffe/siteui/login/images/FB-f-Logo__blue_57.png"
alt="fb"
/>
<span>Login with Facebook</span>
</div>
<div className="login-body__new-to-nl">
<span>New to Netflix ?</span>
<span className="login-body__sign-up">Sign up now.</span>
</div>
<div className="login-body__google_captcha">
This page is protected by Google reCAPTCHA to ensure you're not a
bot.
<span className="login-body__learn-more">Learn more.</span>
</div>
</div>
</div>
</div>
);
}
// export LoginForm component.
export default LoginForm;
FINAL NOTE:
We import useDispatch to dispatch redux actions.
We also import AuthActions and call the login action with the following code:
dispatch(authActions.login({ email, password }));
Conclusion
In this course, we have learn about Redux Thunk by building Netflix. I hope that you can apply Redux to your projects. If you feel the projects is useful, please help me share it to the community and give me Github ⭐
References
[1]. https://redux.js.org/
[2]. https://github.com/reduxjs/redux-thunk
This content originally appeared on DEV Community and was authored by Hiep Le
Hiep Le | Sciencx (2021-07-21T14:27:40+00:00) Learn React & Redux-Thunk By Building Netflix. Retrieved from https://www.scien.cx/2021/07/21/learn-react-redux-thunk-by-building-netflix/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.