Introduction to Redux

Introduction to Redux

0%

1. Getting Started

In this section we will learn what Redux is, why it is useful, and most importantly when it is useful. We will also learn how to set up a basic react-redux application.

When to use Redux?

Setting up a React-Redux Application

2. Fundamental Concepts

In this section we will go through the fundamental concepts of Redux that are necessary to understand the workings of a Redux application. We will use code examples to understand the concepts and in the following section we will use them practically.

Store Dispatch Method

Redux Data Flow

3. Redux in Practice

In the previous section we looked at the basic concepts. In this section we use those basic concepts to understand some more complicated concepts and the structure of a Redux application. In the end we will also look at the Counter application to put together all the pieces of our knowledge together.

Redux Application Structure

Modifying the Template for Use

Creating the Redux Store

Creating a Slice

Understanding Slice

Using Selectors to access State

Modifying State by Dispatching Actions

Thunk Functions

Rules for Reducers

Understanding the Counter Application

4. Creating a React-Redux Application

This chapter is focused on practice hence we will utilize the knowledge we acquired in previous sections to create a practical application using Redux along with React.

The Application

Setting Up the Application

Creating the UI Skeleton

Creating the Profile Slice

Creating the Posts Slice

Completing the Posts feature

Displaying Number of Posts and Users

Adding CSS Styling

Redux Application Structure

To recap from the previous chapter, we can set up a basic application using the following command: npx create-react-app my-app --template redux.

Our focus here is the src folder since the public folder has no significant change. In the src folder, we will see many files and folders however following are the ones to be taken into consideration before we go on to understanding the remaining parts:

src
- app
  - store.js
features
- counter
  - counter.js
  - counterSlice.js
index.js
App.js

Following are the files found in it:

The app folder always contains a store.js file, which contains the code for creating the Redux store;
The features folder is unnecessary though it helps organize all the feature-focused components and their reducers. The counter.js file contains the Counter component, and the counterSlice.js contains the reducer, which is supposed to handle the state changes of the Counter component;
index.js is the entry point of the application, this is executed first when the application starts;
App.js contains the top-level component App.

Here is the codesandbox with the application. Tap the top left three lines to access other files.

Everything was clear?

Section 3. Chapter 1

Course Content

Introduction to Redux

Redux Application Structure

To recap from the previous chapter, we can set up a basic application using the following command: npx create-react-app my-app --template redux.

Our focus here is the src folder since the public folder has no significant change. In the src folder, we will see many files and folders however following are the ones to be taken into consideration before we go on to understanding the remaining parts:

src
- app
  - store.js
features
- counter
  - counter.js
  - counterSlice.js
index.js
App.js

Following are the files found in it:

The app folder always contains a store.js file, which contains the code for creating the Redux store;
The features folder is unnecessary though it helps organize all the feature-focused components and their reducers. The counter.js file contains the Counter component, and the counterSlice.js contains the reducer, which is supposed to handle the state changes of the Counter component;
index.js is the entry point of the application, this is executed first when the application starts;
App.js contains the top-level component App.

Here is the codesandbox with the application. Tap the top left three lines to access other files.

Everything was clear?

Section 3. Chapter 1

some-alt