https://github.com/devsandeepsharma/redux-learning
Explored how to configure and use Redux Toolkit for state management in React 💕💕
https://github.com/devsandeepsharma/redux-learning
reactjs redux redux-toolkit
Last synced: 3 months ago
JSON representation
Explored how to configure and use Redux Toolkit for state management in React 💕💕
- Host: GitHub
- URL: https://github.com/devsandeepsharma/redux-learning
- Owner: devsandeepsharma
- Created: 2025-04-01T05:31:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-18T11:00:13.000Z (over 1 year ago)
- Last Synced: 2025-06-13T20:49:16.375Z (about 1 year ago)
- Topics: reactjs, redux, redux-toolkit
- Language: JavaScript
- Homepage: https://redux-learning-tau.vercel.app
- Size: 514 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧠Redux Learning Project
This project is built to help understand the fundamentals of **Redux Toolkit** in a React application. It includes basic features like user authentication and a counter, showing how to manage global state effectively with modern Redux practices.
---
## 📖 What I Learned
✅ How to set up Redux Toolkit
✅ Creating slices with actions and reducers
✅ Connecting store to React using ``
✅ Reading state with `useSelector`
✅ Dispatching actions with `useDispatch`
✅ Structuring app logic cleanly into components
The app basically checks if a user is "logged in" (mocked).
If yes → shows profile + counter.
If no → shows login screen.
---
## 🔥 Quick Guide: Redux Toolkit Setup in React
### 1. Install Redux Toolkit and React-Redux
```bash
npm install @reduxjs/toolkit react-redux
```
### 2. Create a Slice
```js
import { createSlice } from "@reduxjs/toolkit";
const slice = createSlice({
name: "yourSliceName",
initialState: {},
reducers: {
yourAction(state, action) {
// update state here
},
},
});
export const yourActions = slice.actions;
export default slice.reducer;
```
### 3. Configure the Store
```js
import { configureStore } from "@reduxjs/toolkit";
import yourReducer from "./yourSlice";
const store = configureStore({
reducer: { yourKey: yourReducer },
});
export default store;
```
### 4. Wrap App with Provider
```js
import { Provider } from "react-redux";
import store from "./store";
```
### 5. Use Redux in Components
```js
import { useSelector, useDispatch } from "react-redux";
import { yourActions } from "./yourSlice";
const Component = () => {
const data = useSelector(state => state.yourKey.someData);
const dispatch = useDispatch();
return (
<>
dispatch(yourActions.yourAction())}>Click
>
);
};
```
## Preview
