ReactJS Todo app tutorial with Redux
ReactJS is now the most popular front end framework. And coupled with the awesome functional state management library called Redux — It becomes an elegant choice for Front-End development.
Coming from a Angular background — ReactJS did feel like a bit intimidating at first, simply because there are so many options. There’s a lot of ways to do something. But after spending some time with it — I now really like the freedom ReactJS gives me compared to Angular 2+. Also I like the emphasis on uni-directional data flow and the functional style React follows.
Now let’s dive into the tutorial. We’ll make a simple Todo app with ReactJS + Redux. For the Backend we’ll use the NodeJS Express and MongoDB combination. You can follow the tutorial MEAN app tutorial with Angular 4 I wrote to build the backend.
First install MongoDB and run it. After that, you can just clone the repository from here —https://github.com/nomanHasan/todo-api. Run the following commands -
git clone https://github.com/nomanHasan/todo-api
cd todo-api
npm install
npm start
Now the api is live at http://localhost:3000
Environment Setup
We’ll use the create-react-app CLI built by Facebook. Install npm install -g create-react-app to install the CLI. This will save you from a lot of hassle of webpack and babel configurations.
Now, create a project by running create-react-app todoapp-react This will create a project named todoapp-react into the directory. Go inside the directory by cd todoapp-react and run it by npm start This is the initial app generated by the CLI.
Let’s install font-awesome and semantic ui for React. npm install --save font-awesome semantic-ui-css semantic-ui-react. Import the css inside the index.css.
src/index.js
Now install the necessary libraries that we are going to need in this project. npm install --save axios react-router react-router-dom redux react-redux redux-logger redux-thunk.
We’ll develop the app From Bottom to Top. We’ll start from building the most independent parts like — Redux Actions, Reducers. And then we’ll move to Dumb Components and then to Container Component. At the end we’ll wrap up with Routing and AppComponent Setup.
HTTPClient
First we are going to use the Axios library to make a HttpClient for our TodoApp. Every API call will be made through this Client.
/src/api/httpClient.js
Todo API
Create a todoApi.js file inside the API Folder. It will return make all the requests to the pass through the the responses.
src/api/todoApi.js
Redux
Reudx is the state management system we’ll be using. There are two most essential part of Redux — 1. Action 2. Reducer.
We now start writing the Redux part of our app First. After writing the core Data logic, we will dive into the UI components/Containers.
TodoActions
Actions are the most fundamental part of Flux/Redux architecture. Actions describe how the data will be mutated / how the new state will returned. Our Actions file will contain the Constant Action Types and the Action Creator classes. Many prefers to write the Action Types in a separate files called actionTypes.js . I prefer to write both of them in the same file.
Here the Async Actions uses Redux thunk for handling/dispatching multiple actions. Also there is a pattern of Action, Action_Success, Action_Error action types for the Async actions.
For async actions we’ll have to handle all the possibilities, For this tutorial we’ve ignored implementing the Action_Error Actions.
src/todos/actions/todoActions.js
TodoReducer
Todo Reducer handles all the dispatched actions. The reducer uses Switch case to determine the Action type and determines the new state. We need to write the most important data manipulation logic here.
To handle a Array of Object, you can use one Reducer. But we’ve divided the reducer into two focused ones to improve readability and conciseness.
src/todos/reducers/todoReducers.js
RootReducer
Now we combine the reducers using the combineReducer function of Redux. This part is pretty straightforward.
src/reducers/rootReducer.js
ConfigureStore
We need to configure the Store by supplying it with the Reducer and Initial State. It will be used to create the Store and Provide it.
src/store/configureStore.js
TodoRow
Todo Row component will return the Row of the Todo. It is a simple component. The Table Components are imported from Semantic-UI-React.
src/todos/components/todoRow.js
EditTodo
Edit Todo component is less simple than the TodoRow component. It is also a Semantic UI Table Row. But It has the necessary controls for modifying and Adding Todos. We’ve made some local components that is used here to separate the controls.
src/todos/components/editTodo.js
TodoTable
Todo Table implments the Semantic UI Table. It is a stateless components that just iterates over the todos and Renders the necessary components. It passes on all the events from it’s children to it’s parent.
src/todos/components/todoTable.js
TodoContainer
Now create the Container Component for the smaller Todo Components. We connect the Container Component using the connect function. This Component is the only Store aware Component. This type of Component is called Smart Component. It will contain other Dumb Components who doesn’t have any knowledge of the Store.
src/todos/containers/todoContainer.js
Route
We setup the Routes by using the React Router. It’s using BrowserRouter and the configuration is pretty simple.
src/Routes.js
AppComponent
And last we wire up the Route into the App Component. Now our TodoContainer Component is accessed through the Default route. Now we need to use the ConfigureStore to create the Store and Provide it to the Provider Component.
/src/app.js
/src/app.css
Finished
Now the App is complete. Modify the Package.json to set the port of runnign the app.
"scripts": {"start": "set PORT=3006 && react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"}
Run npm startAnd the browser window will open in http://localhost:3006. You can Add, Edit and Remove the todos using the App.
In the following demo, I’m delaying the Network responses by 1000ms for each Request. That’s how we are seeing the state changes of the Todo entries. Normally the state change would be very fast and hard to notice.
Github Repository
You can access the project from my Girhub Repo https://github.com/nomanHasan/todoapp-react
My Other Articles:
MEAN App Tutorial with Angular 4 (Part 1)
MEAN App Tutorial with Angular 4 (Part 2)
Getting Started with NgRx
