使用来自Stores React的复杂地图的一部分

Question

考虑这个值存储在Zustand/Any Other Store中。

productMap: {
'product-id-abc': {
info: {
name: 'Gmail',
url: 'gmail.com',
api: 'localhost:8080'
},
endpoint: [{
'url': '/getemail',
'method': 'GET'
}],
users: [{
firstName: 'Sam',
email: '[e-mail]'
}]
}
}

所以，如果需要访问存储中的任何值，这是棘手的。当我需要访问id为product-id-abc的产品的第一个用户时，请考虑这种情况。目前我正在遵循这个方法。然而，这在我的用例中失败了，因为当存储更新时，它不会反映在状态变量中。下面是我的代码。

const productMap = useBoundedStore(state => state.productMap);
const [user, setUser] = useState();
useEffect(()=>{
if(productMap[props.productId])
if(productMap[props.productId].users.length) {
setUser(productMap[props.productId].users[0]);
}
},[[]]) // ---> (1)

更简单的方法是将productMap添加到标记为(1)的依赖项中，但是有没有更好的方法，比如将其存储为变量。如果有人能分享一些更好的模式就太好了。

Answer 1

如果我理解正确的话，要从存储中检索用户，最简单的方法是使用useSelector。

const users = useSelector(state = > state.productMap[props.productId].users)