是否有一种方法可以在Zustand中创建可重用的状态更新函数？

Question

我正在努力学习祖斯坦，并遇到了一个棘手的问题。

我可以创建一个可重用的函数来设置我的状态吗？

这个例子是非常人为的，但我想显示动物种群的许多反应成分。其思想是对任何动物使用相同的increasePopulation函数。我相信vanilla JavaScript对此使用了括号表示法，但我正在努力使它与Zustand一起工作。

这是我的店：

import create from 'zustand'

const useAnimalStore = create((set) => ({
    bears: 0,
    cats: 5,
    dogs: 20,
    increasePopulation: (animal) => set((state) => ({ [animal]: state.[animal] + 1 })),
}))

如果这是一个太新的问题，我非常感谢和道歉。

Answer 1

你只是同时使用点和括号符号。

const useAnimalStore = create((set) => ({
  bears: 0,
  cats: 5,
  dogs: 20,
  increasePopulation: (animal) =>
   // state[animal] not state.[animal]
    set((state) => ({ [animal]: state[animal] + 1 }))
}));

CodeSandBox：https://codesandbox.io/s/epic-moore-mfr1f2?file=/src/store.js:31-200

Answer 2

而不是直接使用变量，而是将这些变量打包到一个对象中，并使用、zustand、、set、函数和扩展操作符更新对象。

​

import create from 'zustand'

const useAnimalStore = create((set) => ({
  animals: {
      bears: 0,
    cats: 5,
    dogs: 20,
    },
    increasePopulation: (animal) => set((state) => ({ animals: { ...state.animals, [animal]: state.animals[animal] + 1 } })),
}))

​