Today in this story we are going to build an app using React and Redux. The function of this application is that allows user to keep track of their shopping list.

Before getting into the topic, you have to know the basic fundamentals of redux to develop this application.

Let’s see what are the functions we are going to add for this application to perform various tasks.

• You can able to add an item to the shopping list.
• You can able to mark an item in the basket.
• You can remove an item in the shopping list.
• You can able to delete the entire shopping list.

Frontend

The user interface contains a text input in which user can able to input the shopping item and then they click an add button to add an item in their list. The clear button is used to remove all the items in their list. If a user taps on an item it will add into the basket and the colour will change to grey. If they tap again it will remove the single item in their list.

Actions

Go to src folder and create an another folder called store. Inside that create two files actions.js and reducer.js.

// actions.js

export const actionCreators = {
  addToList: data => ({ type: "ADD_TO_LIST", payload: data }),
  addToBasket: data => ({ type: "ADD_TO_BASKET", payload: data }),
  removeItem: data => ({ type: "REMOVE_ITEM", payload: data }),
  clearItems: () => ({ type: "CLEAR_ITEMS" })
};

We need to assign a value or id for each item to add or remove from the list/basket. The clearItem down not need any data because it will need to set the array in our store back to an empty array.

#javascript #redux #react