Matching Django and React using Redux

App developers are spoiled for choice these days. There are a variety of tools and frameworks we can use to build apps for customers, and narrowing down which tools are the best for a given job can be tricky — especially when pairing up frontend and backend frameworks.

During a recent project, we paired a Django backend with a React frontend using Redux. There was some trial and error involved, but the end result is a very cohesive structure.

Why pair React and Django?

React is a JavaScript library used to develop single page applications. React serves as a frontend client side framework which handles the user interface and it gets and sets data by sending requests to the backend.

As a UI framework, React has numerous benefits, including:

a lot of testing capacity,
SEO-friendliness,
community support,
mobile-friendliness,
a steady learning curve,
reusable components,
stability,
a diverse development toolset; and
improved development productivity.

Django, on the other hand, is an open-source Python web framework that simplifies and encourages rapid web development. It is used to create scalable and secure web applications.

Why pair these two? Well, here are a few reasons:

Both React and Django are popular and perform very impressively in their domains.
Both have very large community support and we can get assistance very quickly.
Frontend and backend both are handled separately, which provides cleaner and clear interface between frontend and backend logics and functions.
Any change in frontend or backend can be deployed separately without interfering with one another.
We can create scalable and multiple web/mobile apps by consuming the same backend APIs.

The backend is created in Django using the REST Django framework. The Django Rest framework is a package built on top of Django to create Rest APIs. The framework handles complexity fairly well and makes serialization much easier.

Python objects can’t be sent over the network — that’s where serialization and deserialization comes in. Serialization is a process that converts these objects into XML or JSON formats, which then can be sent easily over the network.

In React we have different components, which can be used to create a single page application. Every component can have its own data state, and data can also be sent from parent to child component and vice versa.

It’s better to handle the data in a global state. For this purpose, we can use Redux toolkit for data handling.

Matching things up with Redux

Redux is a predictable state container for JavaScript applications. We can use this to handle the data in an optimized way. Every component can have the same state and sending data from one component to another component becomes much easier.

The way it works is much simpler.

There are three core components in Redux:

A central store that holds the entire state of the application.
Actions are events that are used to send data from application to the redux store.
Reducers are pure functions that take the current state of an application, perform an action, and return a new state. The reducer handles how the state (application data) will change in response to an action.

We can use the Redux toolkit to efficiently manage the Redux logic.

As our frontend and backend are completely separate, we need to use APIs for data fetching from backend and show it to users at frontend.

We can use React query for data fetching, as it can fetch and cache the data for use in our application. As we are using the Redux toolkit, it is convenient to use RTK query. It’s an advanced data-fetching and client-side caching tool that works and functions similar to React query but has the benefit of being directly integrated with Redux.

It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching and caching logic yourself.

Following is a code example for getting data with RTK query.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const myApi = createApi({
    reducerPath: 'myApi',
    baseQuery: fetchBaseQuery({
        baseUrl: 'https://myapi.com/data/',
    }),
    endpoints: (builder) => ({
        getDataByType: builder.query({
            query: (type) => `${type}/random`,
        }),
    }),
})

export const { useGetDataByTypeQuery } = myApi

The reducer path is the unique key that defines where the Redux store will store our cache. The base Query contains the base URL to request data.

Endpoints are the set of operations that we need to perform against the server. After this we need to hook this up in our store and then we can use this like the code example below.

import { useGetDataByTypeQuery } from './services/myapi'

export default function App() {
    const { data, error, isLoading } = useGetDataByTypeQuery('programming')
    if (isLoading) {
        return <div>Loading...</div>
    }
    if (error) {
        return <div>Oops, an error occured</div>
    }
    return (
        <div>
            {/* we can use the fetched data here */}
            <p>{data[0].type}</p>
        </div>   )}

It provides the error, data and isLoading state. We don’t have to manage it manually.

In conclusion, both Django and React are great frameworks to learn, but it’s important to know the pros and cons of each to make an informed decision that will be best suited for your needs as a developer. The good thing about using React is that you can organize your components in many different ways to achieve the same goal.

In the world of SPAs, your backend APIs are practically fully independent from the frontend clients. This gives you the flexibility to change the whole architecture of your API (like switching from Django to Flask, for example) without any side effects to your React apps.

Also, if you need programming assignment help, we have a team of experts that can help.

Blog