我应该使用全局状态还是 React hook 的本地状态？

Question

我有以下代码(使用 React 钩子(：

const { state, dispatch } = useContext(Store);
const [branch, setBranch] = useState<TaskingBranchState | null>(null);
const handleBranchChange = (event: ChangeEvent<{}>, newValue: TaskingBranchState | null) => {
setBranch(newValue);
setBranchMembers([]);
}
const [branchMembers, setBranchMembers] = useState([]);
const handleBranchMembersChange = (event: ChangeEvent<{}>, newValue: any) => {
setBranchMembers(newValue);
}

在代码后面的某个地方，我正在做一个useQuery来获取branchMembers，它被调度到我的全局state中。如果重要，它看起来像这样：

useQuery(GET_BRANCH_MEMBERS(["id", "name"]), {
variables: {
branchId: branch?.branchId
},
onCompleted: (data) => {
if (data !== undefined && data.getBranchMembers !== undefined && data.getBranchMembers !== state.branchMembers) {
dispatch({
type: 'DISPATCH_TYPE',
payload: {
branchMembers: data.getBranchMembers
}
});
}
}
});

其中dispatch将payload写入全局state(与上面useContext中的state相同(。

我的问题是：

1. 我应该使用state.branchMembers(useQuery调度到的全局值(还是简单地调用setBranchMembers并使用上面定义的本地branchMembers状态？
2. 有什么区别？
3. 在任何一种情况下，我是否不再需要定义全局状态(如果对 Q1 回答"否"(或不再需要在本地使用useState定义任何内容(如果对 Q1 回答"是"(？

一直在弄乱我的代码，只是刚刚意识到我有这种困惑。不太熟悉 React 钩子 tbh，所以如果这是一个基本面问题，也请帮忙。

谢谢！

Answer 1

这取决于您是否要在不同组件之间共享branchMembers。

由于您已经在将branchMembers调度到全局状态，因此我假设您确实想要共享它。因此，您可以只使用全局状态并删除useState

const { state, dispatch } = useContext(Store);
...
doSomethingWith(state.branchMembers);
...

没有必要将全局状态数据(从上下文(写入本地状态(从useState(来使用它。您可以立即使用上下文中的数据。

更新

如果您的branchMembers依赖于branch那么请继续将branchData与branchMembers一起发送。只要记得写在减速器里

dispatch({
type: "WRITE_BRANCH_AND_BRANCH_MEMBERS",
payload: {
branch: branchId, // or branch or branchData whatever needed
branchMembers: data.getBranchMembers,
},
});

// your-reducer.js
function reducer(state, action) {
...
switch (action.type) {
case "WRITE_BRANCH_AND_BRANCH_MEMBERS": {
newState = {
...state,
branch: action.payload.branchId,
branchMembers: action.payload.branchMembers,
}
break;
}
...
}
}