Adding and Removing items from Redux store

Welcome, this blog will build on top of two previous blogs I have written. The first blog explained how you can connect a react app to the redux store. My second blog demonstrates how your individual components can connect and interact with the redux store. This blog will focus on two types of interactions:
Adding items to the redux store.
Removing items from the redux store.

I will be using the same react application I have used in my previous two blogs, but I added three additional components in order to provide a better understanding of how adding and removing items works. Disclaimer: this blog is written with notion that you have fundamental understanding of React and Javascript.Reminder.js
ReminderContainer.js
ReminderCreator.js


As we move along I will explain the purpose of each component and how they work as well.
Adding Reminder To Redux Store

This section will focus on how we can add items to the store. I would like to point out that any items that I add to the store will not be persistent, because my react application is not connected to a backend that will store the items I add. Meaning if I refresh the page I will lose all the items in my redux store.

As mentioned in my previous blog a react/redux application has the following flow:
Component dispatches an action.
Action hits the reducer.
Reducer will update the state depending on the action that was dispatched.
Reducer will pass the updated state to the store.
Component will receive new state.

If this flow I just explained is a bit a confusing please read my previous blog.

Below I have my actions.js and reducer.js respectively.
actions.js
reducer.js

You might be seeing a lot of strange code, don’t worry as I progress through the blog I will be coming back to these two images and explain what certain part of the code is responsible for.
Reminder.js

The functional component above is one of the newly added components I mentioned before. It’s purpose for now is to show the text corresponding to each reminder and a delete button, which will implement later on.

Now we proceed to talk about how we are going to create a new reminder. For this purpose I built a component called <ReminderCreator />. This component contains a form for the user to create new reminder. When the user presses the create button, the form will be submitted and an action will be dispatched. Below is an image of the component.
ReminderCreator.js

Let me go into more detail on what the code to your left is trying to accomplish. On line 2 we are importing the connect function in order to connect our component to redux. Line 3 is very important because here we are importing the action-creator addReminder from our actions.js file. That’s the reason why we exported our action-creator in our actions.js file. Between lines 26 and 28 we create our mapDispatchToProps function. The function mapDispatchToProps comes with dispatch as an argument and returns an object with a key(the name of key is up to you) that points to a function that dispatches the action-creator we imported on line 3. Since we are creating a new reminder the action-creator is expecting some information in regards to the composition of the reminder, in our case is just the text.

Next we pass the mapDispatchToProps function to our connect function in line 30 as the second argument. The reason for this is that connect expects it’s first argument to be mapStateToProps and it’s second to be mapDispatchToProps, but since we are not using mapStateToProps we must pass null as the first argument in order to prevent any errors.

We then need to dispatch our action-creator when we submit our form. This is taking place on line 12. Here we are dispatching our action by using the name of our key in the object being returned by our mapDispatchToProps. I know it sounds confusing, but you have to remember that this function is being passed down as a prop. That’s why we must write this.props.addRemider() in order to use the function. Our addReminder function is expecting some information and in line 12 we provide that information by passing it the information contained in the state of the component.

When the form is submitted the action is dispatched and the reducer receives it. The reducer will check the type of action and act accordingly. Since our action is to “ADD_REMINDER” it will hit the case in line 7 in the reducer.js file and run that block of code. Within the block of code we are using the spread operator to create a shallow copy of our state (line 9). The next line of code basically makes a copy of what the reminders array and then appends the payload that our action has at the end. In our case the payload is the information that we passed to our addReminder function in our <ReminderCreator /> component.

Subsequently, we need a component that will be able to display the reminders we have added to our redux store. Enter the <ReminderContainer />


The purpose of this component is to display all the reminders in our application state. Just like before we import the connect function from the “react-redux” package in order to connect our component to redux. We then use our mapDispatchToProps to gain access to the state object in our redux store. Between lines 7 and 9 we are iterating over the reminders array in our store and saving that into a variable called listReminders. This variable will then be rendered to the screen on line 14. Something I would like to point out is on line 8 where we are using our Reminder functional component, we are passing a prop of key that points to the index of each reminder in the reminders array. This will become very useful when we implement the delete functionality to our application.

If everything is done correctly your react application should look like the gif below.
gif adding new reminder
Removing Reminder From Redux Store

This section of the blog will focus on how to remove a reminder from the redux store. You might have noticed that in our actions.js file we had a second action-creator named “DELETE_REMINDER” we will now make use of it. In the gif above you can see that each of our reminders is displayed with a delete button. We will adjust our code in our <Reminder /> functional component so that when we click the delete button we can dispatch an action.
Reminder.js file with modifications

First we are going to import the connect function(line 2). Then we are going to import our deleteReminder action-creator(line 3). Just like before we are going to use mapDispatchToProps to dispatch an action (lines 17–21). A reminder, the key in the object being returned by mapDispatchToProps can have any name, but a convention many developers follow is to give it the same name as the action-creator you are importing. This will provide some consistency and clarity. In lines 23–26 we use the connect function to wrap our component and pass null as the first argument and mapDispatchToProps as the second argument.

Now we come to line 10, where we pass a click event to the delete button. The click event will basically dispatch the deleteReminder action with information regarding which reminder was clicked(in our case the reminder object). Before I mentioned that to each reminder we passed a key prop and that will become useful when we get to the delete section, well this is it. Each reminder will have a unique key associated with it, this will inform react which reminder we are removing and to update the DOM accordingly.

Moving on to the reducer. Our reducer will receive the “DELETE_REMINDER” action and it will trigger the case on line 12 in the reducer.js file. Inside the case statement (lines 14–16) we are using the array filter method. We want our filter method to only return the reminders that pass the condition that specified. That condition is to only return the reminders that are not the same as the reminder that we clicked the delete button for (important to point out filter returns a new array and does not mutate the original). Then we set our reminders array in our state equal to the return value of the filter method.

In the end our react application should look something like the gif below. I apologize if the gif is not very clear.


Thank you for reading my blog, I hope it can at least help you get a better understanding on how to add and delete items from the redux store.
More from Rafael Cruz