Intro

I recently built a Cafe management system, in association with Melospiza, which allows users to order food in restaurants and cafes directly, without having to talk to a waiter. Users can choose the items they want to order and add them to the cart and proceed to make payments. This blog documents how I used the Redux toolkit to manage the state of my project.

Why did I choose Redux?

Redux is one of the most popular libraries used for state management. When I started to build the application, I realized that the application has a lot of states to be handled and requires a centralized store which I can use to store all the data right from ordered Items to UI states to know if a button has been clicked or not etc., and I can use this data in another page for a better experience. Hence, I chose Redux.

How did I manage the state in my application?

import { configureStore } from '@reduxjs/toolkit'
import OrderSlice from './OrderSlice'

export const store = configureStore({
  reducer: {
    Order: OrderSlice 
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

I created a Redux store which stores data on the items ordered, a net total of the order and other UI states to open a popup to display the total etc. In my application, I have two pages where these states are used - a home page and a cart page. On the home page, I have card components with buttons that can be clicked to be added to the cart. When clicking the button, the button changes to a div with two buttons and the quantity and it pushes the data of the card to the state variable mentioned below.

 const [itemdata,setitemdata] = useState<ItemsData[]>([]);

The data of the card is used as the data for the items added to the cart. All the data, ranging from the UI state variables to the items selected by the user, is being pushed to the store and makes it easy to access it on the cart page. The Redux store plays an important role in the functioning of the cart page as all the data required is stored there.

const initialState: OrderState = {
  ...
  Total:0,
  ...
  ...
}

export const OrderSlice = createSlice({
  name: 'Order',
  initialState,
  reducers: {
    ...
    addTotal: (state,action:PayloadAction<number>) => {
      state.Total = action.payload
    },
    ...
    ...
})

const Items = useSelector((state:RootState)=>state.Order);
settotal(Items.Total);

const dispatch = useDispatch();
dispatch(addTotal(total));

The above lines of code represent accessing redux data and dispatching the data to the store. In the first snippet, I’m creating the initial state and a slice with a reducer function to update the net total of the order. In the second snippet, I’m accessing the total amount from the store. In the third snippet, I am pushing the data and the state object is updated with the new data. The useSelector hook is used to access the contents of the state and the useDispatch is used to update the state.

Managing state across pages

When the user navigates from the cart page back to the home page, any changes made to the order on the cart page must reflect on the home page. So, I dispatched all the changes made from the cart page to the store. The store data is again accessed by the home page using the useSelector hook. I have to set the state of the ADD button to false if the quantity of that item becomes zero. Having the Redux store helped me manage these UI changes.

Outro

If you'd like to see the code of this project, click here. Or, if you'd like to see the deployment, click here.

Hope this helps you out while you are using Redux. Feel free to give your feedback and Follow for more such blogs.