简介：
在React和Redux应用中，有效管理状态对于最佳性能至关重要。开发人员面临的一个常见问题是，使用者挂钩中还原状态的持续存在，即使没有调用动作，也会导致不必要的重新汇款。在本文中，我们将探讨重置还原状态以及如何在您的应用程序中实施它的重要性。
第1节：了解问题
使用式挂钩是Redux中功能强大的工具，可允许组件访问Redux Store的状态。但是，当还原态未重置时，用途驱动器可能会导致不必要的重新租赁，从而影响性能。
考虑以下示例：
import { useDispatch, useSelector } from "react-redux";
import {useState,useEffect} from "react";
import {addUser} from "../actions";
function Page(){
const dispatch = useDispatch()
const user = useSelector((state) => state.user);
const addUser = useSelector((state) => state.addUser);
//setting a snackbar for user to see the response on adding the new user
const [snackBarIsOpen, setSnackBarIsOpen]=useState(false);
const [snackMsg, setSnackBarMsg] = useState("");
const [usersData, setUsersData] = useState([]);
useEffect(() => {
if (user.response) {
setUserData(user.response.data)
}
}, [user]);
useEffect(() => {
if (addUser.response) {
setSnackBarIsOpen(true)
setSnackBarMsg(addUser.response.message)
}
if (addUser.error) {
setSnackBarIsOpen(true)
setSnackBarMsg(addUser.error.data.message)
}
}, [addUser]);
function addUserButton(name){
dispatch(addUser(name)) //dispatching the action
}
/*
//remaining code
*/
在上面的示例中，我们正在从还原器中检索用户列表，并将其与“添加”按钮一起在页面上渲染以添加用户。如果是新用户，则将其添加到列表中，并使用消息User added successfully添加到列表中。但是，如果它是重复的用户，则将显示错误消息Duplicate user not allowed。在这种情况下，Snackbar用于显示消息。此外，我们正在考虑使用Redux-Persist来维护观众的登录状态。
添加用户时出现的问题（让我们考虑成功的条目）。 Snackbar显示从UseElector钩中检索的成功消息。但是，如果重新渲染了页面，那么小点心仍然显示该消息，即使没有添加用户。
第2节：重置还原状态
为了防止不必要的重新租赁，我们可以在执行删除，编辑或创建之类的操作后重置还原状态。这样可以确保使用使用器挂钩仅在调用相关操作时触发重新订阅器。
第3节：实施重置操作
首先，让我们在还原器中创建一个重置状态：
export const addUserReducer = (state = {}, action) => {
switch (action.type) {
case "addUser-api-request":
return { loading: true }
case "addUser-api-success":
return { loading: false, response: action.payload }
case "addUser-api-fail":
return { loading: false, error: action.payload }
case "addUser-api-reset": //added new case returning empty object
return {}
default:
return state;
}
};
现在，在我们的UI页面中派遣重置操作
///rest of code
<Snackbar
anchorOrigin={{ "bottom", "left" }}
open={snackBarIsOpen}
autoHideDuration={3000}
onClose={()=>{setSnackBarIsOpen(false);dispatch({type:'addUser-api-reset'})}}
message={snackMsg}
/>
</>
)}
export default Page;
现在，每当Snackbar处于活动状态并在3秒后关闭时，它也会在addUser还原器中清空对象，从而有效地重置状态。您也可以一次重置所有状态，但是如果仅重置一个状态，这是推荐的方法。
结论：
在React和Redux应用中重置还原状态对于有效的状态管理和防止不必要的重新汇款至关重要。通过实施重置操作并在还原器中处理它们，您可以改善应用程序的性能并确保更顺畅的用户体验。在您的项目中尝试一下此技术，并查看其产生的差异！
如果您有任何改进代码的建议，请在评论部分中留下。如果您发现此帖子有帮助，请喜欢并分享。
快乐的编码！