\n React is a component-based JavaScript library widely used for building user interfaces (UI). The two main state management hooks in React are useState and useReducer. In this tutorial, we will take a deep dive into useReducer.\n<\/p>\n
\n useReducer is one of React’s built-in hooks used to manage complex state logic. This hook updates the state by calling a specific function whenever there is a state change. While useState is suitable for simple state management, useReducer is better suited for more complex logic or when multiple state changes are needed.\n<\/p>\n
The basic way to use useReducer is as follows.<\/p>\n
\n\nimport React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return { count: state.count + 1 };\n case 'decrement':\n return { count: state.count - 1 };\n default:\n throw new Error();\n }\n}\n\nfunction Counter() {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n return (\n <div>\n <p>Count: {state.count}<\/p>\n <button onClick={() => dispatch({ type: 'increment' })}>Increment<\/button>\n <button onClick={() => dispatch({ type: 'decrement' })}>Decrement<\/button>\n <\/div>\n );\n}\n<\/code>\n<\/pre>\n\n As seen in the example above, useReducer uses two arguments:
\n the reducer function<\/strong> and the initial state<\/strong>. The reducer function takes the current state and action as parameters and returns the new state. The dispatch function updates the state using the action object.\n<\/p>\n3. Advantages of useReducer<\/h2>\n\n- \nComplex state management:<\/strong> useReducer is a powerful tool for managing multiple states. It allows for clear delineation of various actions and states.\n <\/li>\n
- \nRefactoring and scalability:<\/strong> Because the reducer function is maintained independently, it makes refactoring state logic easier.\n <\/li>\n
- \nTestability:<\/strong> The reducer function is a pure function, making it relatively easy to unit test.\n <\/li>\n<\/ul>\n
4. Comparison of useReducer and useState<\/h2>\n
\n While both useState and useReducer help manage states, each is suited for different situations based on its usage.\n<\/p>\n
\n\n\nFeature<\/th>\n useState<\/th>\n useReducer<\/th>\n<\/tr>\n<\/thead>\n \n\nSimple state<\/td>\n Advantageous<\/td>\n Disadvantageous<\/td>\n<\/tr>\n \nComplex state<\/td>\n Disadvantageous<\/td>\n Advantageous<\/td>\n<\/tr>\n \nState change logic<\/td>\n Disadvantageous<\/td>\n Advantageous<\/td>\n<\/tr>\n \nSeparation of states<\/td>\n Disadvantageous<\/td>\n Advantageous<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n5. Practical Example: Creating a ToDo List App<\/h2>\n
\n Now we will create a simple ToDo list app using useReducer. This app will include features to add and remove tasks.\n<\/p>\n
\n\nimport React, { useReducer } from 'react';\n\nconst initialState = { todos: [] };\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'add':\n return { ...state, todos: [...state.todos, action.payload] };\n case 'remove':\n return { ...state, todos: state.todos.filter((_, index) => index !== action.payload) };\n default:\n throw new Error();\n }\n}\n\nfunction TodoApp() {\n const [state, dispatch] = useReducer(reducer, initialState);\n const [input, setInput] = React.useState('');\n\n const addTodo = () => {\n dispatch({ type: 'add', payload: input });\n setInput('');\n };\n\n return (\n <div>\n <h2>ToDo List<\/h2>\n <input \n type=\"text\" \n value={input} \n onChange={(e) => setInput(e.target.value)} \n \/>\n <button onClick={addTodo}>Add<\/button>\n <ul>\n {state.todos.map((todo, index) => (\n <li key={index}>\n {todo} <button onClick={() => dispatch({ type: 'remove', payload: index })}>Remove<\/button>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n<\/code>\n<\/pre>\n\n The above TodoApp component provides functionality for users to add and remove tasks. It manages state using useReducer, defining logic to add or delete tasks based on each action (type).\n<\/p>\n
6. Advanced Usage of useReducer<\/h2>\n
\n Beyond simple state management, useReducer supports advanced features. Here are some of them:\n<\/p>\n
6.1 Loading Initial State<\/h3>\n
\n This is a way to load initial state asynchronously. To do this, we use the useEffect hook.\n<\/p>\n
\n\nimport React, { useReducer, useEffect } from 'react';\n\nfunction App() {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n useEffect(() => {\n const fetchData = async () => {\n const response = await fetch('\/api\/todos');\n const data = await response.json();\n data.forEach(todo => dispatch({ type: 'add', payload: todo }));\n };\n fetchData();\n }, []);\n\n \/\/ Remaining app code...\n}\n<\/code>\n<\/pre>\n6.2 Nested State Management<\/h3>\n
\n You can implement structured state management by combining multiple reducers. When used with the context API, global state management can be handled easily.\n<\/p>\n
\n\nfunction mainReducer(state, action) {\n return {\n counter: counterReducer(state.counter, action),\n todos: todoReducer(state.todos, action),\n };\n}\n\n\/\/ State and dispatch are provided with multiple reducers.\nconst [state, dispatch] = useReducer(mainReducer, initialState);\n<\/code>\n<\/pre>\n7. Conclusion<\/h2>\n
\n useReducer is a powerful tool for building complex state management logic in React. Especially when multiple state changes are necessary, useReducer can enhance the readability and maintainability of your code. Based on what we learned in this tutorial, try utilizing useReducer in your own React applications.\n<\/p>\n
\n If you have additional examples you want to practice or questions, please leave a comment. We support your journey in React development!<\/p>\n","protected":false},"excerpt":{"rendered":"