Prerequisite

Please read about the source folder first! It talks about the structure of the development environment that’ll help you understand this walkthrough better!

The SOURCE Folder

Introduction

In this walkthrough, we’ll be exploring the two examples in the client subfolder of the mern-boilerplate: Axios and Redux. But before we begin, let’s review what we’ve learned and how it connects together.

We’ve learned about React Router and how to route different pages, for example, a page for the Axios example and another for the Redux example. The <Root/> component serves as the “root directory” and sets up the routes to display the respective “view” components.

We also learned about Redux to maintain a centralized state. Even though there isn’t overlap between the two examples, the Axios page can access Redux’s global store since the store provider wraps around the entire app (but in the example, it doesn’t need Redux).

The api using Axios is available to any file, meaning that the Redux example can use it (by importing it), but there’s no need to.

Now let’s dive into the examples

Axios Demo

Redux Demo