Day 139 - Building A Todo App With React & Redux [1]

In the last post we started building a todo application with react and redux. We first created a simple todo app with CRA, styled it and added a biolerplate todo item in it using useState Hook. After that we defined a reducer function which currently on adds a todo and deletes a todo item from the store.

In today's post we will fully implement the redux into the todo application and after that we will be able to add a todo and delete a todo from the application. We will start from where we left. We createda reducer frunction in the src/redux folder. This reducer function is a pure function and will only return a modified copy of the store we provided it with.

Now will create two new files that are also related to the redux. First a store.js and second a actions.js.

Store

The store file just exports a store instance using the createStore function from the redux library and takes the reducer function we defined earlier as the argument.

import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer);

export default store;

Actions

The actions files contains two pure function that will return a js object with a type and a payload field. addTodo function takes text of the todo as the argument and returns an object with type and payload. Simillary removeTodo takes the id of the todo and the reducer function will remove the todo with id as same as this todo.

export function addTodo(text) {
  return {
    type: "ADD_TODO",
    payload: {
      text,
    },
  };
}

export function removeTodo(id) {
  return {
    type: "REMOVE_TODO",
    payload: {
      id,
    },
  };
}

This is all we need to use from the redux library to create and use the store in our application. All we need now is to implement the store in our todo application components.

Implmenting Store In TodoApp

First we need to wrap the <App> compoenent in the index.js file with a Provider component with store as a prop to it.

import store from "./redux/store";
// ....
<Provider store={store}>
  <App />
</Provider>;
// ....

What this does is makes the store accessible to all the children of the App component. After this we will connect the store with the todoList.

Connecting Store With TodoList

In the TodoList Component, import { connect } from react-redux and after that create a function named mapTodosToProps with store as the argument to it and it will return us the todos with the TodoList props.

import { connect } from "react-redux";
// ...
const TodoList = props => {
  const { todos } = props;
  // ...
  // ..
};

const mapStateToProps = state => {
  return { todos: state };
};

export default connect(mapStateToProps)(TodoList);

At the end of the file we use the connect function as a pipe to transfer todos we take from the mapStateToProps function to the props of the TodoList component that we will later render in the UI.

Adding And Removing Todo Item

We defined two actions in the actions.js file and using those functions we will add and remove the todo item from the list.

In the AddTodo.js component, we import store from the store.js and import addTodo action from actions. Later in the code we use these two from the add Todo item to store. Store has a method called despatch which we call with action as an argument to update the store as required. In this application we use a form to send out data. In the form elemnt we use the onSumbit event to send the value of the input to the submitData function which will update the store.

<form className="form" onSumbit={submitForm}>

const submitForm = e => {
  e.preventDefault();

  store.dispatch(actions.addTodo(val));
  setValue("");
};

For removing item we use a simmilar trick. On the svg icon we add a onClick event with an arrow function that calls the removeTodo action. which will filter the store and returns us the updated store.

<div
    className="todo__cross"
    onClick={() => store.dispatch(removeTodo(todo.id))}
>

You can find the completed version of this todo App in the github repo -> Here <-.

zainscizainsci