前端码易

当我们想要触发更新时，必须要调用 set | setState 方法。该方法是基于现有整体状态的浅合并

例如下面这种写法，最后将得到状态 {salmon, tuna, setSalmon }

set
setState
1
const useStore = create((set) => ({

2
  salmon: 1,

3
  tuna: 2,

4
  setSalmon: (newVal) => set(() => ({ salmon: newVal }))

5
}))

如果我们要单独针对某一个状态进行更改，我们可以从 state 中获取当前值，然后进行新值的运算并返回合并

store.ts
1
export const useStore = create()((set) => ({

2
  count1: 1,

3
  count2: 1,

4
  inc_count1: () => set((state) => ({ count1: state.count1 + 1 })),

5
  dec_count1: () => set((state) => ({ count1: state.count1 - 1 })),

6
  inc_count2: () => set((state) => ({ count2: state.count2 + 1 })),

7
  dec_count2: () => set((state) => ({ count2: state.count2 - 1 })),

8
}))

完整如下

预览
index.tsx
store.ts
count1.tsx
count2.tsx
1
import Count1 from './count1'

2
import Count2 from './count2'

3


4
export default function Counter() {

5
  return (

6
    <div className='flex items-center justify-center space-x-4'>

7
      <Count1 />

8
      <Count2 />

9
    </div>

10
  )

11
}
上一篇
2、create
下一篇
4、与并发API结合使用
专栏首页
到顶
专栏目录