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

Question

我有以下代码（使用 React hooks）：

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 相同）。

我的问题是：

我应该使用 state.branchMembers（useQuery 调度到的全局值）还是简单地调用 setBranchMembers 并使用上面定义的本地 branchMembers 状态？
有什么区别？
在任何一种情况下，我是否不再需要定义全局状态（如果对 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;
  }

  ...

  }
}

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

Should I use a global state or React hook's local state?

reactjs

react-state-management

react-hooks

react-state