Connecting Client to Server¶
We developed both React.js (client) and Node.js (server) applications but they still do not communicate with each other.
We need to make sure our client application shows data from backend and updates the database based on users actions.
To do that, we will slightly update our React.js application to make API calls to our server application for certain functionalities: getting the list of all todo items, adding a new item, deleting an item or toggling the done status of an item.
First, we will need to make sure that both React.js and Node.js applications are up and running.
Next, since we use Redux as our state management for React, we will need redux-thunk middleware that will allow us to write API calls to backend from our actions and based on response we will dispatch certain actions to our store to update the state.
We can install it by entering our client-app folder in the Terminal and executing the following command
npm install --save redux-thunk
In order to be able to use it, we will have to update our store and apply thunk middleware there.
import { createStore, applyMiddleware } from "redux";
import rootReducer from "./reducers/index";
import thunk from 'redux-thunk';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
When we have our thunk middleware setup with Redux store we can procced with connecting our application to backend.
First thing we can do is getting all todo items from backend, store them in the store and display them to user.