React Lesson 8: Deep Dive into React Redux

React Lessons. Lesson 8. Deep Dive into React Redux

React Lessons. Lesson 8. Deep Dive into React Redux

In the previous lesson, we understood the working of Redux by building a Counter app. Now, we will apply that knowledge and go in-depth with the React-Redux library. Let’s start.

First, we will make some changes to our folder structure. The components including Provider are called container that contains store. Let’s create a new folder “containers” and add a root container.

Now, change our index file to import the root container:

That’s good enough. Let’s move on to React-Redux in our main application.

Use Redux to serve our articles

Redux divides objects into “containers” and “components.” “Smart” components are those connected with “Store” – such as Counter, for example. And some components simply receive data and render them. Now we’ll have two containers – Counter and ArticleList. We will add Redux with ArticleList. Let’s get a quick idea of how we’ll do it:

  1. Create a reducer to serve all the articles.
  2. Connect ArticleList to store which will render the article list.
  3. Write an action to delete any article.
  4. Dispatch the action to filter out an article from the article list.

Let’s dive into code

Let’s dive into code

1. Create a reducer to serve all the articles

We already created a “counter” reducer inside the “reducers” folder. Similarly, we will create an “articles” reducer and export it.

Let’s recall reducers from the previous lesson, “Reducers are just pure functions that return a new state every time we dispatch an action which in turn re-render the View.”

Previously, we had just a single reducer “index.js” which we split into two separate reducers “articles.js” and “counter.js”. We will “combineReducers” from the “redux” library to combine and export them to the store.

 2. Connect ArticleList to store which will render the article list.

Components that are connected to the store are called containers. We are going to create an “Articles” component inside the “containers” folder and connect it with the store.

We are using the “connect” function from the “react-redux” library to connect the “Articles” component with the store. As we learned in the previous lesson, connect in a Higher-Order function receives two arguments:

  • mapStateToProps
  • mapDispatchToProps

“mapStateToProps” enables us to use state from reducer inside our component. We used “articles” from the reducer state and passed it as props above. We are using actions here, so we will leave the second argument empty for now.

3. Write an action to delete any article

We wrote two actions “increment” and “decrement” in the previous lesson. Similarly, we will write a “deleteArticle” action to delete any article from article array. Let’s create an action type first:

Action types are defined to avoid spelling mistakes while writing them inside actions and reducers. Now we will create an articles file inside actions folder:

Let’s recall actions from the previous lesson, “Actions are a piece of code that tells how to change state”. Here, our “deleteArticle” action gets an “id” and passes it to the reducer to filter out the article with that particular “id.”

Previously, we had only one action creator as “actions/index.js,” which we split into two separate action creators “articles.js” and “counter.js”. They can be exported as:

The reducer will be updated like this:

Now, we just have to dispatch the action from a view.

4. Dispatch the action to filter out an article from the article list.

The best place to dispatch the “deleteArticle” action is when a user clicks on any article. Let’s connect the Article component which is rendering each article to store.

Our first argument of “connect” is null because we are not using anything from the reducer state. The second argument “mapDispatchToProps” takes actions and maps them to props. This will make sure the “deleteArticle” action is provided as a prop to the component.

Our Article container with delete functionality is ready. You can visit this codesandbox below to see it in action.

  Edit React_lesson_lesson8

Your home task:

Do Reducer and a part of Store for filters, as well as create the filtering functionality for the articles. It means, in the end, upon choosing a time in the calendar, only those articles added during this time should be displayed. And transmit all these filters from ArticleList to the “filters” component. Handle these filters through Redux – so, ArticleList will display only the filtered data.

This lesson’s coding can be found here.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

React Lesson 15: Checking Homework progress from Lesson 14

Today, we are going to cover homework from Lesson 14 and add comment API to load comments. ...

React Lesson 14: Redux Thunk Deep Dive

In this lesson, we will understand the internals of Redux Thunk and the use cases where we should use ...

React Lesson 13 Part 2: Asynchronous actions

In the previous article, we used Redux Thunk and learned how to structure actions for asynchronous calls. Now we will update reducer to handle them ...

1 comment

Nikita Bragin February 9, 2020 at 6:11 pm
0

Use redux toolkit instead of redux on its own

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy