建立 React 應用程式時，管理狀態可能會變得複雜，尤其是在處理相互依賴的多個狀態變數時。如果您發現自己處於這種情況，那麼是時候探索 useReducer Hook 的強大功能了！
什麼是 useReducer？
useReducer Hook 是一個以可預測的方式管理狀態的強大工具。它允許您以乾淨且有組織的方式管理複雜的狀態邏輯，使您的程式碼更易於維護。
文法
useReducer Hook 接受兩個參數：
useReducer(reducer, initialState)
reducer：包含自訂狀態邏輯的函數。
初始狀態：組件的初始狀態，通常是一個物件。
如何運作
1.範例：
這是如何使用 useReducer Hook 來管理計數器的簡單範例：
import React, { useReducer } from "react";
// Define the initial state
const initialState = { count: 0 };
// Define the reducer function
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
// Inline styles
const containerStyle = {
maxWidth: "400px",
margin: "50px auto",
padding: "20px",
borderRadius: "10px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)",
textAlign: "center",
backgroundColor: "#ffffff",
fontFamily: "'Roboto', sans-serif",
};
const headingStyle = {
fontSize: "2.5rem",
margin: "20px 0",
color: "#333333",
};
const buttonStyle = {
margin: "10px",
padding: "12px 24px",
fontSize: "1.1rem",
border: "none",
borderRadius: "5px",
cursor: "pointer",
transition: "background-color 0.3s, transform 0.3s",
outline: "none",
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
};
const incrementButtonStyle = {
...buttonStyle,
backgroundColor: "#28a745",
color: "white",
};
const decrementButtonStyle = {
...buttonStyle,
backgroundColor: "#dc3545",
color: "white",
};
// Hover and active styles
const buttonHoverStyle = {
filter: "brightness(1.1)",
transform: "scale(1.05)",
};
return (
<div style={containerStyle}>
<h1 style={headingStyle}>Count: {state.count}</h1>
<button
style={incrementButtonStyle}
onMouseOver={(e) =>
(e.currentTarget.style = {
...incrementButtonStyle,
...buttonHoverStyle,
})
}
onMouseOut={(e) => (e.currentTarget.style = incrementButtonStyle)}
onClick={() => dispatch({ type: "increment" })}
>
Increment
</button>
<button
style={decrementButtonStyle}
onMouseOver={(e) =>
(e.currentTarget.style = {
...decrementButtonStyle,
...buttonHoverStyle,
})
}
onMouseOut={(e) => (e.currentTarget.style = decrementButtonStyle)}
onClick={() => dispatch({ type: "decrement" })}
>
Decrement
</button>
</div>
);
}
export default Counter;
輸出：
2.範例：
import React, { useReducer, useState } from "react";
// Define the initial state
const initialState = {
todos: [],
};
// Define the reducer function
const reducer = (state, action) => {
switch (action.type) {
case "ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };
case "REMOVE_TODO":
return {
...state,
todos: state.todos.filter((todo) => todo.id !== action.payload),
};
default:
return state;
}
};
function TodoApp() {
const [state, dispatch] = useReducer(reducer, initialState);
const [inputValue, setInputValue] = useState("");
const handleAddTodo = () => {
if (inputValue.trim()) {
dispatch({
type: "ADD_TODO",
payload: { id: Date.now(), text: inputValue },
});
setInputValue(""); // Clear input field
}
};
// Internal CSS
const styles = {
container: {
maxWidth: "600px",
margin: "50px auto",
padding: "20px",
borderRadius: "10px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
backgroundColor: "#f9f9f9",
fontFamily: "'Arial', sans-serif",
},
heading: {
textAlign: "center",
fontSize: "2.5rem",
marginBottom: "20px",
color: "#333",
},
input: {
width: "calc(100% - 50px)",
padding: "10px",
borderRadius: "5px",
border: "1px solid #ccc",
fontSize: "1rem",
marginRight: "10px",
},
button: {
padding: "10px 15px",
fontSize: "1rem",
border: "none",
borderRadius: "5px",
backgroundColor: "#28a745",
color: "white",
cursor: "pointer",
transition: "background-color 0.3s",
},
buttonRemove: {
padding: "5px 10px",
marginLeft: "10px",
fontSize: "0.9rem",
border: "none",
borderRadius: "5px",
backgroundColor: "#dc3545",
color: "white",
cursor: "pointer",
transition: "background-color 0.3s",
},
todoList: {
listStyleType: "none",
padding: 0,
marginTop: "20px",
},
todoItem: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "10px",
borderBottom: "1px solid #ccc",
backgroundColor: "#fff",
borderRadius: "5px",
marginBottom: "10px",
},
};
return (
<div style={styles.container}>
<h1 style={styles.heading}>Todo List</h1>
<div style={{ display: "flex", justifyContent: "center" }}>
<input
style={styles.input}
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Add a new todo"
/>
<button style={styles.button} onClick={handleAddTodo}>
Add Todo
</button>
</div>
<ul style={styles.todoList}>
{state.todos.map((todo) => (
<li style={styles.todoItem} key={todo.id}>
{todo.text}
<button
style={styles.buttonRemove}
onClick={() =>
dispatch({ type: "REMOVE_TODO", payload: todo.id })
}
>
Remove
</button>
</li>
))}
</ul>
</div>
);
}
export default TodoApp;
輸出：
useReducerHook 是 React 工具包的絕佳補充。它使您能夠有效地處理複雜的狀態管理，使您的應用程式更加健壯且更易於維護。在您的下一個專案中嘗試一下，讓您的狀態管理更上一層樓！
以上是使用 React 中的 useReducer Hook 掌握狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
