Introduction: This week you will be building the Home Page in a Food Order App using Redux. The Home Page component is responsible for displaying a list of restaurants, categories, and cuisines available for ordering food. The implementation utilizes React, ReactBootstrap, Redux, and ReactRouter.
Problem Statement: We have already implemented the functionality of displaying restaurant and category details on the Home page and login functionality on the Login Page. You can refer to the code for actions, constants, dispatch functions, and reducers for the implementation of the restaurant list and category list state in the constants folder. In Redux, action constants are string values that define the type of action being dispatched. They are typically used to avoid hardcoding action types in multiple places within your application and to provide a centralized and standardized way of referencing actions. The constants folder has files related to backend API constants, category, cuisines, restaurants, and users action constants.
storage.js: This file is responsible for creating the Redux store. Let’s understand the working step by step:
1. It first imports all the reducers.
2. The reducers are then combined using the combineReducers() function.
3. Next, we create an initial state for the store.
4. Next, we create middleware using thunk.
5. Finally, we create a store with the reducer, initial state, and the middleware.
6. The Redux Dev Tools Extension is a browser extension that allows you to inspect and debug the state and actions of your Redux application in a more user-friendly way.
7. The composeWithDevTools function comes from the redux-devtools-extension package, and it helps you integrate the Redux Dev Tools Extension into your Redux store's middleware setup.
Your task is as follows: Display Cuisine details on the HomePage. Make use of the Fetch Cuisines API to display the name and image of all cuisines available on the HomePage.
1. Define the constants, actions, and reducer functions in the cuisineActionConstants.js, cuisineActions.js, and cuisineReducers.js files provided.
2. Use the cuisineList state and dispatch actions on the HomePage to display the cuisine names and images.