useReducer in React
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
No comments yet. Be the first to comment.
In REACT state management is a vital part of the general architecture of a REACT app. The first and most powerful state management hook is the useState() hook. This is a very powerful hook and is ideal for tracking a state that does not have complex logic. However, when there is an application with a state that has more complex logic then the useReducer() hook is ideal for this kind of scenario.
const [state, dispatch] = useReducer(reducer, initialState)
The reducer is the user-defined reducer function while the initialState is the pre-defined initial state of the application.
Let’s start with a simple example of a log-in form that has the email and password. We are supposed to track the state using a reducer function. How can we go about this?
const [state, dispatch] = useReducer(reducer, {email: "",passWord: ""});
1 |
|
The reducer function is simply a switch statement that returns something if the test case is true. Here the test case is the type of a predefined action which is ‘handleMail’ and ‘handlePassword’. The …state tracks the previous state and the email and password update the state with a payload (action.payload). The payload is the new state that the user inputs. This ensures that state updates are always tracked.
1 |
|
The form functions that handle the email and the password have a dispatch that has an object with the action type and a payload. The type is used to access the action which is used inside the reducer function accessed as ‘action.type‘. The payload stores the form input which is later accessed in the reducer function as ‘action.payload‘.
1 |
|
The form is a simple HTML form. The ‘value’ is the initial state defined in step 1 above. The state changes are tracked through the ‘onChange’ event listener.
The useReducer() hook is a simple and convenient way to update state and share data between our components in an organized way.
Updating the state only requires calling the dispatch(action) with the required action. The reducer() will update the forwarded state. Once the reducer updates the state it will re-render the component with the new state value.
A word of advice is that you should use the useState() hook for simple state management.
Happy coding
