Add Redux Thunks

[izou3]

Problem Description

When redux is used for state management, updates to the central state is made ONLY through actions. However for asynchronous updates that take a while, such as HTTP requests to fetch data and update the redux state, we instead use thunks instead of actions. Currently our async updates occur in the react component's lifecycle method which is okay but not very organized and doesn't take advantage of redux's ability.

Task at Hand

Your task is to clean a very important aspect of the codebase and get you up to speed with both our app structure/flow and redux. You must meet the following requirements:

Requirements

1. For the following axios request that are currently in the useEffect hooks, dispatch them instead as redux's thunks and organize them into their own files in the /redux/thunks directory.

   • Login User Request at /components/Auth/LoginButton

   • Submit Donation Request at /screen/DonationForm/ReviewScreen/ReviewContract.tsx

   • Submit Dish Form at /components/DishForm

When you're done this is what the app should look like/do:

When a user logins, submits a donation request or submits a dish, all the functionalities will work properly.

Hints

• Please note our use of the redux-toolkit library to simply our coding of redux within the app
• Checkout the second resource, it contains the shortcut code you'll need to code the logic. Make sure you understand EVERY LINE.
• Please make sure you understand redux lifecycle and how thunks play a role
• Play around with the app first and test everything so you know overall functionality of all the screens and components
• See how each screen and components in the codebase relate to what you see on your screen
• This should be very simple if you understand the codebase and redux thunks

ByteCoin: 15B

Resources

• https://redux-toolkit.js.org/introduction/getting-started
• https://redux-toolkit.js.org/api/createAsyncThunk *This contains the code example to actually write the thunk
• https://redux.js.org/usage/writing-logic-thunks

Let's start off Strong!