Understanding the data flow for full stack development with Django REST and React
When I started full stack development with Django, Django REST and React Native, one of the things that was hard for me to understand at the beginning was to understand in a practical way how each part is connected.
Once you understand how each part is related between the backend, frontend and the DB, you can start developing what you want and distribute the work of your projects in a much more efficient way.
The following diagram I made shows how each part is connected between Django and React.
Backend
Database
Where you store the data of your app
Data Models
The data objects that are going to be used in the app and it is the structure in which the data is going to be saved in the database
As you can see in the image, we are creating a data model for a product, which will contain all the properties that we assign to it.
After create or update a data model, remember to run
python manage.py makemigrationsand then
python manage.py migrate
Serializers
Before getting (GET) the data to the frontend, these must go through a serializer that transforms them into datatypes so that they can be used in the frontend, and viceversa when sending data to the backend (POST )
So basically, serializers converts objects, querysets or models into data types understandable by Python, javascript and front-end frameworks.
Serializers can be used to serialize as well as deserialize the data.
You can also do other actions on serializers such as nest other serializers, check values and change the structure of the response.
The serializer below, what it does is return an object with all the properties that exist in the Product data model
{
user: ...
name: ...
image: ...
...
}
API Views (controllers)
Basically the CRUD, controllers to send data from the database or add new data coming from the frontend
To create these controllers there are many ways in Django REST, and in truth there are also many ways to update or create objects, but to keep it simple and if you are just starting out I recommend you using the @api_view decorators since it is much more easy to visualize what is happening during the process of every call.
GET, POST, DELETE, UPDATE
Frontend
Actions — redux
The action in the frontend is basically the function that call a view in the backend using an URL, so you can have actions such as, list, update, getById, delete, cancel, etc.
Using Axios you can make an http request to communicate with the backend and views (GET, POST, DELETE, UPDATE).
In simple words, the actions in redux are to fetch data from the DB, add new data, update or delete it (using the backend views)
For example, after fetching data (GET) from the db, the application state must be updated through a dispatch that contains the type (type of action) which will indicate to redux which reducer to use, and the payload (data fetched from the DB)
Reducers — redux
The reducer basically changes the state of the app depending on the action
As you can see below, the action type has three forms, REQUEST, SUCCESS and FAIL, so depending on the response the state will have different properties and different data.
For example, in the case of PRODUCT_LIST_REQUEST, the state will only have the property of loading: true (for a moment) so we can use those properties to know when the call to the backend is being made and thus show a loader.
The same with SUCCESS and FAIL, if it is SUCCESS it saves the data (products) brought from the backend, if it is FAIL it saves the error response sent from the backend.
Frontend (components/screens) React
As you can see in the image below, within the useEffect function we call the action we want to trigger in the backend, in this case get all the products.
Very briefly, in this case what useEffect does is trigger this action just after render, so as we enter to the HomeScreen we will try to fetch all the products form the backend to show them to the user.
Then using useSelector we can access the state of the application where the data brought or the backend response will be reflected. (remember the reducer)
Destructuring the state we can easily access each of the properties defined in the reducer, and use them depending how them change over time.
My opinion about Django REST as a backend framework? I think it’s a great framework and very easy and fast to learn, so if you already know React or any frontend framework and you want to create MVPs or full stack projects fast, I would definitely recommend you use Django REST as a backend
This is a course that really help me a lot. Django with React | An Ecommerce Website
I hope that this blog has helped you to start with Django REST and React.
I’m not an expert, in fact I’m still learning things of Django, so any advice, feedback, etc is welcome 👋
Follow me in Twitter
