reactjs - 我应该使用全局状态还是 React hook 的本地状态?
问题描述
我有以下代码(使用 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
,它被分派到我的 globalstate
中。如果它很重要,它看起来像这样:
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
}
});
}
}
});
wheredispatch
将 写入payload
全局state
(与state
上面相同useContext
)。
我的问题是:
- 我应该使用
state.branchMembers
(调度到的全局值useQuery
)还是简单地调用并使用上面定义setBranchMembers
的本地状态?branchMembers
- 有什么不同?
- 在这两种情况下,我是否不再需要定义全局状态(如果对 Q1 回答否)或不再需要在
useState
本地定义任何内容(如果对 Q1 回答是)?
一直在弄乱我的代码,才意识到我有这种困惑。不太熟悉 React hooks tbh,所以如果这是一个基础问题,也请帮忙。
谢谢!
解决方案
这取决于您是否希望branchMembers
在不同组件之间共享。
由于您已经分派branchMembers
到全局状态,我假设您确实想分享它。因此,您可以只使用全局状态并删除useState
const { state, dispatch } = useContext(Store);
...
doSomethingWith(state.branchMembers);
...
无需将全局状态数据(来自上下文)写入本地状态(来自useState
)即可使用它。您可以立即使用上下文中的数据。
更新
如果您branchMembers
依赖,branch
那么请继续发送branchData
with 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;
}
...
}
}
推荐阅读
- python - 我怎样才能逐一检查列表中的每个项目,中间有延迟?
- javascript - 如何获得背景颜色和颜色不同的字符串?
- css - 如何缩短bulma输入?
- gcloud - G Suite 的 G 云 MX 记录中的首选项和邮件服务器无效记录数据
- angular - Angular 中的 Vue.prototype 等价物是什么?
- rust - 重载引用和值调用
- java - 使用带有嵌套静态类的类的好习惯,然后用更多静态方法扩展包私有抽象类以保持组织?
- google-sheets - 谷歌表格中的第 2 页是否有自动输入建议列表,只输入 1 或 2 个字符?
- r - 如何提高循环操作的性能
- jax-rs - TomEE JAX-RS java.lang.NoSuchMethodError javax.ws.rs.core.Link.fromUri