我应该使用全局状态还是 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 hooks tbh，所以如果是基础问题，也请帮忙。

谢谢！

Answer 1

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

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

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

无需将全局状态数据（来自上下文）写入本地状态（来自useState）即可使用它。您可以立即使用上下文中的数据。

更新

如果您的branchMembers 依赖于branch，那么请继续发送branchData 和branchMembers。记得写在reducer里面

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;
  }

  ...

  }
}