);
};
export default Todos;
```
As you can see in above code it has one input with `handleChange()` method and one add `button`.
### Creating a Reducer And Store
Now let's create Reducer and actions for this application. Open `reducer.js` file and write the following code:
```javascript
import { createSlice } from "@reduxjs/toolkit";
const initialState = [];
const addTodoReducer = createSlice({
name: "todos",
initialState,
reducers: {
//here we will write our reducer
//Adding todos
addTodos: (state, action) => {
state.push(action.payload);
return state;
},
},
});
export const { addTodos } = addTodoReducer.actions;
export const reducer = addTodoReducer.reducer;
```
Now here we're going to use [createSlice()](https://redux-toolkit.js.org/api/createSlice) function. This function takes 1 object having 3 parameters,
- name of the slice function
- initial State
- All reducer logic inside reducers `{}` object
**Line 1:** Importing the `createSlice` function.
**Line 2:** creating initial state, it is an empty array.
**Line 5:** Here we have used `createSlice` function and passed all 3 required parametrs.
**Line 13:** We are creating one action called `addTodos` this action get an callback function which have two arguments ( `state` , `action` ). Then this function will return state with adding `action.payload` (payload contains one todo item).
**Line 22:** Here we are exporting `addTodos` as action from `addTodoReducer` .
**Line 23:** In this line we are exporting `reducer` from `addTodoReducer` .
#### Creating a Store
Now, let's create store and pass this reducer. Open `store.js` and write the following code:
```javascript
import { configureStore } from "@reduxjs/toolkit";
import { reducer } from "./reducer";
const store = configureStore({
reducer: reducer,
});
export default store;
```
In the above code we have used [configureStore](https://redux-toolkit.js.org/api/configureStore) function which takes one `reducer` and automatically takes care for the Redux DevTools extension so we don't have to worry about it. Now the `store` is ready with `reducer` that we have created.
#### Connecting Redux Store With React App
Let's connect this store to our React application. I like to connect `store` in the `index.js` file. Open the `index.js` file and import `Provider` from the `react-redux` and `store` from `store.js` file.
```javascript
import { Provider } from "react-redux";
import store from "./redux/store";
```
Now just wrap your `` component with this `Provider` and pass `store` in the `Provider` as the following code block,
```javascript
ReactDOM.render(
//Just like below 👇
,
document.getElementById("root")
);
```
Now our Redux store is connected with our React App.
#### Connect React component with Redux
Let's use this store and [Redux functionalities](/blogs/redux-simply-explained) in the `Todos.js` component. To connect this component with Redux we will use [connect()](https://react-redux.js.org/api/connect) method from `react-redux` . Open `Todos.js` file and import `connect` method from `react-redux` .
```javascript
import { connect } from "react-redux";
```
Now instead of simple `export default Todos` change it to the following line:
```javascript
export default connect(null, null)(Todos);
```
This is how we use `connect` method, It's like [higher order function](/blogs/higher-order-component-hoc-react) that takes your component (Todos in our case) and add redux functionalities to it then return it.
> Now add props in your component and log this props. You will see an Object having
>
> `dispatch`
>
> method. Which means your component is now connected with Redux.
Let's use todos state in our component. To use state from Redux we have to pass `mapStateToProps` method in the `connect` method and to use actions or functions that we created inside the reducer (like `addTodos` ) we have to create and pass `mapDispatchToProps` method and add it to the coonect method. So let's create both of this methods in the `Todos` component.
```javascript
const mapStateToProps = (state) => {
return {
todos: state,
};
};
```
This method takes state as argument and will return state as we want. Here, I want state as `todos` .
```javascript
const mapDispatchToProps = (dispatch) => {
return {
addTodo: (obj) => dispatch(addTodos(obj)),
};
};
```
This method takes `dispatch` as argument and it can dispatch action to `reducer` . Here, I want to add todos so this method returns an `addTodo` method. The `addTodo` method dispatch an `addTodos` action with an obj (which contains todo item, it will acts as action.payload).
> Here, make sure to import
>
> `addTodos`
>
> action from
>
> `reducer`
>
> file.
Now add both of these methods in the connect just like the following code block,
```javascript
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
```
let's connect input and add button with this state and methods.
```javascript
import React, { useState } from "react";
import { connect } from "react-redux";
import { addTodos } from "../redux/reducer";
const mapStateToProps = (state) => {
return {
todos: state,
};
};
const mapDispatchToProps = (dispatch) => {
return {
addTodo: (obj) => dispatch(addTodos(obj)),
};
};
const Todos = (props) => {
console.log("props", props);
const [todo, setTodo] = useState("");
const add = () => {
if (todo === "") {
alert("Input is Empty");
} else {
props.addTodo({
id: Math.floor(Math.random() * 1000),
item: todo,
completed: false,
});
setTodo("");
}
};
const handleChange = (e) => {
setTodo(e.target.value);
};
return (
);
};
//we can use connect method to connect this component with redux store
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
```
**Line 23:** Here I have created `add` function. First it will check if todo state is not empty if it is empty then shows an alert else it will use `addTodo` method from props. In this method we will pass todo object which contains `id`, `todo` text, `completed` boolean which is initially false.
**Line 50:** Make sure to connect `add()` with `onClick` of button.
**Line 55:** here I have mapped values from `todos` state. If `todos.length > 0` then it will map it and shows all todo items you add.
> You can also use Redux DevTools Extension to see actions and state.
#### Adding All Operations in The Reducer
Let's add all the required operations in the `reducer`.
```javascript
import { createSlice } from "@reduxjs/toolkit";
const initialState = [];
const addTodoReducer = createSlice({
name: "todos",
initialState,
reducers: {
//here we will write our reducer
//Adding todos
addTodos: (state, action) => {
state.push(action.payload);
return state;
},
//remove todos
removeTodos: (state, action) => {
return state.filter((item) => item.id !== action.payload);
},
//update todos
updateTodos: (state, action) => {
return state.map((todo) => {
if (todo.id === action.payload.id) {
return {
...todo,
item: action.payload.item,
};
}
return todo;
});
},
//completed
completeTodos: (state, action) => {
return state.map((todo) => {
if (todo.id === action.payload) {
return {
...todo,
completed: true,
};
}
return todo;
});
},
},
});
export const {
addTodos,
removeTodos,
updateTodos,
completeTodos,
} = addTodoReducer.actions;
export const reducer = addTodoReducer.reducer;
```
**Line 16:** Here, the `removeTodos` will filterout items whose id is same as `action.payload` . (which means while using this action we will pass id as payload)
**Line 20:** The `updateTodos` is used to change todo text or `todo.item` . It will check if id is same as passed in `action.payload` then it will return all other properties of the item and change the text of todos with the passed value.
**Line 32:** The `completeTodos` will change the completed boolean value of particular item to true.
**Line 46:** Make sure to export all the required todo actions.
Now we will use all these actions. Let's separate display todos component from `Todos.js` file. Remove `ul` list from it and let's add it in the `DisplayTodo` item component. Before creating `DisplayTodos.js` component, first let's create `TodoItem.js` component. so, open `TodoItem.js` file and write the following code.
> Don't read this code, First read the explanation.
```javascript
import React, { useRef } from "react";
import { AiFillEdit } from "react-icons/ai";
import { IoCheckmarkDoneSharp, IoClose } from "react-icons/io5";
const TodoItem = (props) => {
const { item, updateTodo, removeTodo, completeTodo } = props;
const inputRef = useRef(true);
const changeFocus = () => {
inputRef.current.disabled = false;
inputRef.current.focus();
};
const update = (id, value, e) => {
if (e.which === 13) {
//here 13 is key code for enter key
updateTodo({ id, item: value });
inputRef.current.disabled = true;
}
};
return (