Creating bank app with React, redux-toolkit, and typescript

We are going to create a bank app with the help of react and redux-toolkit.

Firstly what is redux, so redux is basically a state management library that helps us to manage our state.

There are basically three main things in redux action, reducer, and store

Action: let’s take a bank example we go to the bank for any reason may be withdrawing cash or depositing cash or checking the bank balance so these are the action that is going to be done.

Reducer: now we have action but that next? so we go to the cashier and the cashier takes your action for example if you are going for money deposited then he will take your money (payload) and your request (action) and fulfill with the bank so here cashier is actually your reducer he will take action and payload and return updated state

Store: your bank is your store where everything is stored.

The above is the understanding of redux working now lets dive in code

I’m going to Initialize my project with vite. you can choose create-react-app

lets create file and folder first

now let's go to bankSlice.ts and create action and reducer first

bankSlice.ts

exporting actions and reducer from bankSlice.ts

bankSlice.ts

now let’s create a store

store.ts

after creating a store let's provide that store to our app

main.tsx

and export custom hooks for dispatch and selector

hooks.ts

now we are all set to create store , action, and reducer and provide them to the app

now let's create UI for this app

App.tsx

App.tsx

App.tsx

Source code: https://github.com/shivam1470/redux-toolkit-with-typescript

Thank you! 🙏