A Guide to the useReducer Hook in React
- With Code Example
- August 18, 2023
Series - React Hooks
Certainly! The useReducer hook is another important React Hook that is used for managing complex state logic in functional components. While the useState hook is great for managing simple state, useReducer is a more suitable choice when you have more advanced state management needs, such as when state transitions become intricate or when you need to manage multiple related pieces of state. It follows the same principles as the Redux library, helping you manage state transitions in a predictable and controlled manner. Let’s delve into how the useReducer hook works and explore some examples.
Syntax:
const [state, dispatch] = useReducer(reducer, initialState);
state: The current state of the component.dispatch: A function used to send actions to the reducer.reducer: A function that takes the current state and an action, and returns the new state.initialState: The initial state of the component.
Counter with useReducer:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
In this example, the useReducer hook is used to manage a count state using the reducer function. The dispatch function sends actions to the reducer, which then updates the state based on the action type.
Form Input with Validation:
import React, { useReducer } from 'react';
const initialState = {
username: '',
password: '',
isValid: false
};
const reducer = (state, action) => {
switch (action.type) {
case 'inputChange':
return {
...state,
[action.field]: action.value,
isValid: action.field === 'password' ? action.value.length >= 6 : state.isValid
};
default:
return state;
}
};
const Form = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<form>
<input
type="text"
name="username"
value={state.username}
onChange={(e) => dispatch({ type: 'inputChange', field: 'username', value: e.target.value })}
/>
<input
type="password"
name="password"
value={state.password}
onChange={(e) => dispatch({ type: 'inputChange', field: 'password', value: e.target.value })}
/>
<p>{state.isValid ? 'Valid' : 'Invalid'}</p>
</form>
);
};
In this example, the useReducer hook is used to manage form input fields and validation. The reducer function handles changes to input fields and updates the state accordingly.
The useReducer hook is a versatile tool for managing more complex state logic, especially when state transitions involve multiple conditions and interactions. It helps you maintain a clear and predictable flow of data in your components.
Related Posts
Start Using NGX Charts With Angular
Angular is a powerful front-end framework that enables developers to build robust and dynamic web applications. One essential aspect of modern web development is data visualization, and NGX Charts is a popular library that seamlessly integrates with Angular to create stunning charts and graphs.
