在React中导入Zustand属性的标准方式

Question

是否有一种更简单的方法来导入Zustand属性并在react组件中分配它们?

示例:这是ComponentA.tsx

中的逻辑

const { propA, propB, propC,...,propZ } = useStore(state => (
propA: state.propA,
propB: state.propB,
.
.
propZ: state.propZ
), shallow);

而不是像propA和propB这样的多个局部变量。进口的标准方式是什么?

Answer 1

获取所有内容

最简单的方法，但是你会导入所有的数据(我不知道这是否会影响性能)

const App = () => {
const state = useStore()
return {
<>
<h1>{state.title}</h1>
<p>{state.paragraph}</p>
</>
}
}

选择多个状态片

const title = useStore((state) => state.title)
const paragraph = useStore((state) => state.paragraph)

默认情况下，它使用严格相等(旧===新)来检测更改，这对于原子状态选择是有效的。

const nuts = useStore((state) => state.nuts)
const honey = useStore((state) => state.honey)

如果你想构造一个内部有多个状态选择的对象，类似于redux的mapStateToProps，你可以通过传递浅相等函数告诉zustand你想要对对象进行浅差分。

import shallow from 'zustand/shallow'
// Object pick, re-renders the component when either state.nuts or state.honey change
const { nuts, honey } = useStore(
(state) => ({ nuts: state.nuts, honey: state.honey }),
shallow
)
// Array pick, re-renders the component when either state.nuts or state.honey change
const [nuts, honey] = useStore((state) => [state.nuts, state.honey], shallow)
// Mapped picks, re-renders the component when state.treats changes in order, count or keys
const treats = useStore((state) => Object.keys(state.treats), shallow)
For more control over re-rendering, you may provide any custom equality function.
const treats = useStore(
(state) => state.treats,
(oldTreats, newTreats) => compare(oldTreats, newTreats)
)

src: https://github.com/pmndrs/zustand食谱