https://github.com/salehmangrio/react_redux
This project is a simple React application that utilizes Redux for state management, specifically designed to demonstrate the core concepts of the React Redux Toolkit.
https://github.com/salehmangrio/react_redux
react-redux react-redux-toolkit redux
Last synced: about 2 months ago
JSON representation
This project is a simple React application that utilizes Redux for state management, specifically designed to demonstrate the core concepts of the React Redux Toolkit.
- Host: GitHub
- URL: https://github.com/salehmangrio/react_redux
- Owner: Salehmangrio
- Created: 2024-11-24T14:44:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-24T14:53:27.000Z (over 1 year ago)
- Last Synced: 2025-02-10T02:14:59.001Z (over 1 year ago)
- Topics: react-redux, react-redux-toolkit, redux
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Redux Counter Application
## Project Overview
This project is a simple React application that utilizes Redux for state management, specifically designed to demonstrate the core concepts of the React Redux Toolkit. The application features a counter that allows users to increment, decrement, and reset the count. It is built using Vite as the development tool, which provides a fast and efficient environment for modern web applications. The project is structured following best practices, ensuring clarity and maintainability.
## JavaScript and JSX File Descriptions
### 1. `src/app/store.js`
**Purpose**:
This file configures the Redux store, which manages the application state and makes it accessible to all components.
**Key Code Explanation**:
```javascript
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counter/counterSlice.js";
export const store = configureStore({
reducer: {
counter: counterReducer,
}
})
```
- Imports the `configureStore` function from Redux Toolkit and the `counterReducer` from `counterSlice.js`.
- Creates a Redux store with a single reducer for managing the counter's state.
---
### 2. `src/app/counter/counterSlice.js`
**Purpose**:
This file defines the `counterSlice`, which contains the reducer and actions for managing the counter's state.
**Key Code Explanation**:
```javascript
import { createSlice } from '@reduxjs/toolkit';
const initialState = { value: 0 }; // Ensure you have an initial state defined
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value++;
},
decrement: (state) => {
state.value--;
},
reset: (state) => {
state.value = 0;
},
}
});
// Export the actions
export const { increment, decrement, reset } = counterSlice.actions;
// Export the reducer
export default counterSlice.reducer;
```
- Imports `createSlice` from Redux Toolkit to simplify reducer creation.
- Defines an initial state with a `value` property set to `0`.
- Defines three reducers:
- `increment`: Increases the `value` by 1.
- `decrement`: Decreases the `value` by 1.
- `reset`: Resets the `value` to `0`.
- Exports the actions (`increment`, `decrement`, `reset`) for dispatching from components.
- Exports the reducer for integration into the Redux store.
### 3. `src/main.jsx`
**Purpose**:
This is the entry point of the React application where the root component is rendered into the DOM. It integrates the Redux store into the application using the `Provider` component.
**Key Code Explanation**:
```javascript
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { store } from './app/store.js'
import { Provider } from 'react-redux'
createRoot(document.getElementById('root')).render(
,
)
```
- Imports necessary modules, including React and Redux components.
- Renders the `App` component into the DOM, wrapped in `Provider` to provide access to the Redux store.
- Uses `StrictMode` to help identify potential problems during development.
---
### 4. `src/App.jsx`
**Purpose**:
The `App` component serves as the main interface for the counter functionality, showcasing how to interact with the Redux store using hooks.
**Key Code Explanation**:
```javascript
import { useDispatch, useSelector } from 'react-redux'
import './App.css'
import { increment, decrement, reset } from './app/counter/counterSlice'
function App() {
const dispatch = useDispatch();
const count = useSelector((state) => state.counter.value)
return (
<>
Learn About React Redux Toolkit
{count}
dispatch(increment())}>Increment
dispatch(decrement())}>Decrement
dispatch(reset())}>Reset
>
)
}
export default App
```
- Uses `useDispatch` to dispatch actions (`increment`, `decrement`, and `reset`) to the Redux store.
- Uses `useSelector` to access the current counter value from the Redux state.
- Renders the counter and three buttons for user interaction.
---
## Summary
This React application demonstrates the use of Redux for state management through a simple counter interface. The project uses Vite for fast development and efficient builds, while the clear structure of JavaScript and JSX files ensures maintainability. The `counterSlice.js` file highlights the simplicity and power of Redux Toolkit for managing state in modern web applications.