https://github.com/miguelitodev/redux-basic-tips
This project was built based on the tutorial "Redux from CONCEPT to PRACTICE! Migrating from Old Redux to Redux Toolkit (Tutorial)" by Coffstack. The goal is to demonstrate the implementation of Redux in a ReactJS (or React Native) app, exploring both Old Redux and Redux Toolkit, and migrating from one to the other in a simple and practical way. 🔄
https://github.com/miguelitodev/redux-basic-tips
reactjs redux redux-toolkit typescript vite
Last synced: 3 months ago
JSON representation
This project was built based on the tutorial "Redux from CONCEPT to PRACTICE! Migrating from Old Redux to Redux Toolkit (Tutorial)" by Coffstack. The goal is to demonstrate the implementation of Redux in a ReactJS (or React Native) app, exploring both Old Redux and Redux Toolkit, and migrating from one to the other in a simple and practical way. 🔄
- Host: GitHub
- URL: https://github.com/miguelitodev/redux-basic-tips
- Owner: miguelitodev
- Created: 2025-02-28T00:34:10.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-02-28T01:20:01.000Z (3 months ago)
- Last Synced: 2025-02-28T09:29:59.177Z (3 months ago)
- Topics: reactjs, redux, redux-toolkit, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux Toolkit Project - From Concept to Practice 🚀
This project was built based on the tutorial **"Redux from CONCEPT to PRACTICE! Migrating from Old Redux to Redux Toolkit (Tutorial)"** by Coffstack. The goal is to demonstrate the implementation of Redux in a ReactJS (or React Native) app, exploring both Old Redux and Redux Toolkit, and migrating from one to the other in a simple and practical way. 🔄
## What will you learn? 🤓
- **Core Redux concepts**: Action, Reducer, Store, Dispatch, Global State, and the Redux Data Flow. 🔄
- How to implement Redux in your ReactJS or React Native app. ⚛️
- How to use Old Redux with HOC `connect`, `mapStateToProps`, and `mapDispatchToProps`. 🔌
- How to migrate to Redux Toolkit using `createSlice` and `configureStore`. 🔧
- How to use the `useSelector` and `useDispatch` hooks instead of the old Redux. 🎣
## Technologies Used 🛠️
- **ReactJS** ⚛️
- **Old Redux and Redux Toolkit** 🔴🔧
- **React-Redux** (for integrating Redux with React) 🔄
- **JavaScript / TypeScript** 💻
## How to Run the Project 🏃♂️
1. Clone this repository:
```bash
git clone https://github.com/miguelitodev/redux-basic-tips.git
```
2. Navigate to the project directory:
```bash
cd redux-basic-tips
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and go to `http://localhost:3000` to see the project in action. 🌐
## What does the tutorial cover? 📚
This tutorial covers everything from the basic concepts of Redux to migrating to Redux Toolkit, with practical examples and detailed explanations of each part of the process. 📖
Here are the topics covered in the video:
- What is Redux and its data flow? 🔄
- How Old Redux works, including HOCs `connect`, `mapStateToProps`, and `mapDispatchToProps`. 🔌
- Migrating to Redux Toolkit with `createSlice` and `configureStore`. 🛠️
- How to use `useSelector` and `useDispatch` hooks. 🎣
- Backward compatibility between Old Redux and Redux Toolkit. 🔄
**Watch the full video**: [Redux from CONCEPT to PRACTICE! Migrating from Old Redux to Redux Toolkit (Tutorial)](https://youtu.be/HGMd3dbB-lM) 🎥
## Useful Links 🌐
- [GitHub](https://github.com/miguelitodev) 🖥️
- [My Portfolio](https://miguelito.dev) 💼
- [Instagram](https://www.instagram.com/miguelitodev) 📸
---
Let me know if you need further adjustments or more emojis! 😄