In the last post we developed a frontend for our note taking application which has the ability to store notes client-side using redux store. In this part we will create database models and APIs to create, read, update and delete notes in a database using react frontend and redux store.

The code for this repository is hosted on my github, v1k45/ponynote. You can checkout part-3 branch to see all the changes done till the end of this part.

Creating DB Models

To store the notes in database, first we need to create models. We'll start by creating an app and then a Note model inside it.

In the project root, create an app using the startapp command.

(ponynote) $ ./manage.py startapp notes

Add notes.apps.NotesConfig to the INSTALLED_APPS list in ponynote/settings.py.

Integrating DRF API with Frontend

To be able to fetch and manipulate notes in the backend from the frontend, we need to make use of a few libraries. In order to fetch notes, we will use whatwg-fetch (already included with create-react-app) and redux-thunk for asynchronous action creation.

What is redux-thunk?

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a condition is met. The inner function receives the store methods dispatch and getState as parameters.

Install and setup redux-thunk

$ npm install redux-thunk --save

Then in the App.js file, import thunk and applyMiddleware function, pass it to the createStore function and we are good to go.

Using the async action in component

And call that action dispatcher when component mounts so that the notes are fetched from the API and loaded into the redux store. Add componentDidMount method to PonyNote class:

componentDidMount(){this.props.fetchNotes();}

On reload you should see the list of notes which you created using the API directly. If you haven't already, lets connect the addNote action to the API so that we start seeing notes directly from the database.

Add notes using API call

Lets update the addNote action in actions/notes.js file to send a POST request to the notes api:

In the above action function, our application will send a POST request with JSON data of the note text and then disptach the ADD_NOTE action which will insert the added note to redux store. In reducers/notes.js, update the ADD_NOTE case to add the whole note object instead of text.

case'ADD_NOTE':return[...state,action.note];

After this change our PonyNote.jsx component so that we reset the form only after the note has been successfully created. Add a return statement to the action dispatch call so that we can chain additional callbacks to the API call promise.

addNote:(text)=>{returndispatch(notes.addNote(text));},

Update the submitNote method by moving this.resetForm() call from the bottom to a callback for addNote function:

this.props.addNote(this.state.text).then(this.resetForm)

Similarly you can catch any errors thrown by the promise and handle API error and show them on the UI. To keep this post simple we will not cover that.

Updating notes

Updating notes is very similar to the addNote action which calls the API. All we need to do is pass the note.id in the url. Update the updateNote action in actions/notes.js:

Note that the first argument of updateNote is index instead of id, this is done to easily get the note which is being updated. Also, we have a getState argument for the return action function, it is used to get the current state of the application. We used it to get the note.id using the index we had.

Another important thing is that the request method is PUT, which indicates that the resource on the server should be updated. In the final action dispatch we have the index and newly saved note as the data, we will use it in the reducer.

In the DELETE_NOTE reducer in reducers/notes.js make the following changes:

case'DELETE_NOTE':noteList.splice(action.index,1);returnnoteList;

Summary

Now you'll be able to create, read, update and delete notes using the API built using django-rest-framework. All the notes are stored in redux store client-side, changes will be reflected in the database and persist on reload.

In the next part we'll add authentication to pony note so that multiple users can maintain their notes privately. We'll implement login/signup flow and associate notes with users.