https://github.com/sagnik-coder24/use-reducer
A React web app demonstrating the use of the useReducer hook for state management.
https://github.com/sagnik-coder24/use-reducer
css react use-reducer vite
Last synced: 24 days ago
JSON representation
A React web app demonstrating the use of the useReducer hook for state management.
- Host: GitHub
- URL: https://github.com/sagnik-coder24/use-reducer
- Owner: Sagnik-Coder24
- Created: 2024-10-30T20:17:08.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T20:34:33.000Z (6 months ago)
- Last Synced: 2025-04-06T06:45:56.064Z (24 days ago)
- Topics: css, react, use-reducer, vite
- Language: JavaScript
- Homepage: https://sagnik-coder24.github.io/Use-Reducer/
- Size: 90.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React useReducer Hook Example
A React web application demonstrating the use of the `useReducer` hook for state management. This app showcases how to manage complex state logic in a more predictable way.
## Features
- Demonstrates the use of `useReducer` hook
- Manage complex state logic
- Clean and maintainable code
## Getting Started
### Prerequisites
Make sure you have the following installed:
- [Node.js](https://nodejs.org/)
- [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Sagnik-Coder24/Use-Reducer.git
cd Use-Reducer
```
2. Install dependencies:
```bash
yarn install
# or
npm install
```
### Running the App
1. Start the development server:
```bash
yarn dev
# or
npm run dev
```
2. Open your browser and go to `http://localhost:5173` to see the app in action.
## Usage
### Understanding `useReducer`
The `useReducer` hook is an alternative to `useState` for managing state in React components. It is particularly useful for managing complex state logic and when the next state depends on the previous state.
### Example Code
Here’s a simple example of how to use the `useReducer` hook in a React component:
```javascript
import React, { useReducer } from "react";
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
dispatch({ type: "increment" })}>+
dispatch({ type: "decrement" })}>-
);
}
export default Counter;
```
### Explanation
- **Initial State:** The `initialState` object defines the initial state of the component.
- **Reducer Function:** The `reducer` function takes the current state and an action, and returns the new state based on the action type.
- **useReducer Hook:** The `useReducer` hook takes the reducer function and the `initialState` as arguments, and returns the current state and a dispatch function to send actions to the reducer.
## Built With
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
## Contributions
We welcome contributions from the community! Feel free to open issues and pull requests to suggest improvements, add new features, or fix bugs. Here’s how you can contribute:
1. Fork the repository
2. Create a new branch (`git checkout -b feature-branch`)
3. Make your changes
4. Commit your changes (`git commit -am 'Add some feature'`)
5. Push to the branch (`git push origin feature-branch`)
6. Open a pull request
## Suggestions & Feedback
If you have suggestions or feedback on how to improve this project, feel free to post them on our [GitHub Issues](https://github.com/Sagnik-Coder24/Use-Reducer/issues) page. We love hearing your ideas and collaborating with the community!