Welcome to the React useReducer Practices repository! This collection demonstrates different approaches and best practices for using the useReducer hook in React functional components to manage state effectively. From simple to advanced use cases, this repository will help you master the useReducer pattern in your projects.
- Basic Usage: Understand the fundamentals of
useReducerwith clear examples. - Complex State Management: Learn how to manage deeply nested state and perform multiple state updates.
- Action Patterns: Implement action types, payloads, and side effects for robust state handling.
- Middleware Examples: Discover how to integrate with middleware (like
useEffect) for async actions. - Custom Reducers: Build your own custom reducers and improve your application’s scalability.
-
Clone the repo:
git clone https://github.com/arman-mokhtari/quiz-reducer.git cd quiz-reducer -
Install dependencies:
npm install
-
Run the project:
npm start
Navigate to
http://localhost:3000to explore the examples.
A simple counter example to introduce the core concepts of useReducer.
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'inc':
return { count: state.count + 1 };
case 'dec':
return { count: state.count - 1 };
default:
throw new Error();
}
}A classic Todo app to demonstrate how to manage a list of tasks and handle complex state updates.
How to fetch data asynchronously using useReducer and useEffect.
Learn how to deal with complex state structures using nested objects and arrays.
- State and action types
- Action payloads
- Conditional logic in reducers
- Side effects with
useEffect - Best practices for organizing reducer logic
Feel free to open issues or submit pull requests! Contributions are welcome.