Build Single page applications with React and Django Part 9 — Access Redux on the Next.js page-level

Introduction

This series is to build a SPA with ReactJS and Django.

We have discussed a few topics from part 1 to part 7. In part 8, we began to use Next.js and export static full pages for overcoming drawbacks of the CSR(Client-Side Rendering) and improving the performance.

On the frontend side, there are several kinds of tools to improve the project that we have talked like Redux, middleware for Redux(Thunk, Saga, etc), and Jest. The page-level Redux accessing is an important part of improving CSR.

About this series

The target of this series is to build a ReactJS single page application(SPA) with Django API server and deploy on Heroku.

• Part 1: Deploy Django application to Heroku and migrate PostgreSQL
• Part 2: Connect React App with Django App
• Part 3: Use JWT with DRF and tests endpoints on Travis-CI
• Part 4: Create Endpoints to Manipulate Resources
• Part 5.1: Exchange Facebook’s access token to JWT from Django/DRF
• Part 5.2: Exchange Github’s access token to JWT from Django/DRF
• Part 6: Create Django Application’s sitemap on Heroku for SEO
• Part 7: How to Refactor Function Components with HOC?
• Part 8: Static Rendering with Next.js and Django on Heroku
• Part 9: this article
• Part 10: Improve SEO with Pyppeteer in Django
• Part 11: Theming with Redux and styled-component

Use redux-promise-middleware as middleware

In this article, we will integrate next-redux-wrapper into the project in order to access Redux at the page-level. For async actions, the official document recommends that we can use redux-promise-middleware to dispatch async actions.

1. Create a Next.js project

• You can use the following npx command to create a default project folder for the Next.js project which also provides page-level Redux supports

create-nrs-web

• Answer the questions with the following answers. We will migrate the middleware from react-thunk to redux-promise-middleware

2. Installation

• Install the package with the following command.

npm install --save redux-promise-middleware

• Use redux-promise-middleware as the middleware in store/store.js

3. Modify components for Redux

• Add pending and fulfilled for each type in types

export const GET_DATA_PENDING = 'GET_DATA_PENDING';
export const GET_DATA_FULFILLED = 'GET_DATA_FULFILLED';
export const GET_USERS_PENDING = 'GET_USERS_PENDING';
export const GET_USERS_FULFILLED = 'GET_USERS_FULFILLED';

• Add A flag in states

export const initialState = {
    ...
    isPending:true
};

• Add pending and fulfilled cases in reducer

• Modify actions with Promise

Access Redux at the page-level

In this section, we have to integrate next-redux-wrapper in the project

1. Installation

• Install the package with the following command.

npm install --save next-redux-wrapper

• Use next-redux-wrapper as the middleware in the store and export the wrapper

2. Modify components for Redux

• Import and add a HYDRATE case in the reducer

3. Modify the Next.js components

• Wrap the root component with the wrapper

• AddgetStaticProps or getServerSideProps on the page

When should I use de>getServerSideProps?

You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration.

When should I use de>getStaticProps?

You should use getStaticProps if * The data required to render the page is available at build time ahead of a user’s request. * The data comes from a headless CMS. * The data can be publicly cached (not user-specific). * The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.

Related knowledge

1. Redux Installation

2. Redux hooks make things easier to use Redux.

3. Redux middleware

4. Jest test cases

References

• kirill-konshin/next-redux-wrapper
• Next.js pre-rendering
• Data Fetching

Summary

Thanks for your patient. I am Sean. I work as a software engineer.

This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.

• The Facebook page for articles

• The latest side project: Daily Learning

Related topics

How to use the two-way binding in Knout.js and ReactJS?

Learn how to use SignalR to build a chatroom application

My reflection of :

IT & Network:

Database:

Software testing:

Debugging:

DevOps: