Zustand: ?? ??? ?? ??? React? ?? ?? ???

Zustand? React? ?? ???? ??? ?? ??? ?? ?? ????????. ??? ???? ??? ?? ?? ??? ?? ???? ???? ?? ???? ???? ?? ??? ???. Zustand? ??? ???? ??? ????? ????? ? ?? ??? ??? ???? ???? ???? ?????.

????? ?? Zustand? "??"? ??? ????? ??????, React?? ?? ??? ????? ???? ? ? ??? ???????. Zustand? ???? ????? ?? ??? ???? React ???????? ?? ? ?? ??? ?? ???? ? ??? ?????.

---

1. ????? ??????

Zustand? React ??????? ?? ?? ????? ???? ?? ?? ????????. ??? ?? ????? ??? ? ?? ??? ?? ??? ???? ?????. Zustand? ?? ????? ???? ????. ?, ?? ???? ???? ???? ???? ?? ????? ?? ??? ??? ??? ? ????.

Zustand? ?? ??:

• ??? API: Zustand?? ?? ?? ?? ?? ??? API? ????.
• ??? ???? ??: Redux? ?? Zustand? ???? ? ???? ???? ???? ??? ?? ??? ???? ????.
• ??? ??: Zustand? ???? ???? ?????? ??? ????? ??? ??? ????.
• React ???: Zustand? ??? ???? API? ???? React? ???? ?????.

---

2. Zustand? ?? ??

1. ??

Zustand? store? ??? ??????? ??? ???? ?????. Zustand?? ???? create ??? ???? ??? ? ???, ??? ???? ???? ??? ? ????.

?:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

• useStore ??? Zustand? ?? ??? ???? ??? ??????. ??? count? ???? ??, ??? ?? ???? ??? ?????.

2. ?? ??

???? ??? ??? React ?? ??? useStore ??? ???? ??? ?? ??? ? ????.

?:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

• useStore ??? ???? ???? ??? ??? ??? ???? ? ????. ??? ??? ??? ?? ???? ?? ???? ?? ??? ? ????.

3. ?? ???? ?

??? ??????? ????? ???? set ???? ?????. set ???? ?? ??? ???? ? ??? ???? ??? ?????. Zustand? ??? ??? ???? ?? ??? ?? ???? ?? ???? ??????.

?:

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

• increment ???? set ??? ???? ?? ?? ???? ??? ??? ???????.

---

3. Zustand? ??

1. ???? ?????

Zustand? ??? ?? ??? API? ??? ?? ?? React ???????? ??? ?? ?? ??? ? ????. ??? ??, ??? ?? ?? ??? ?? ??? Redux? ?? ?? ??????? ? ? ?? ??? ?? React?? ??? ???? ?? ??? ??? ???.

2. ?? ??

Zustand? ??? ??????? ?? ?? ??? ? ????. ?? ?????? ??? ?? ?? ?? ??(?? ?? ??? ??)? ?? ?? ??? ?? ?????. Zustand? ???? ????? ??? ?? ??? ??????? ????? ???????.

3. ?? ???

Zustand? React? ?? ??? ????? ???? ?? ?? ??? ????? ???? ?? ????? ?? ?? ??? ???????. ?? ??? ????????? ??? ??? ?????.

4. ?????? ??

Zustand? ??? TypeScript ??? ?? ??? ??? ???? ?? ??? ? ?? ??? ?????.

5. ???? ???? ????

?? ?? ?? ?????? ?? Zustand? ??????? ??? ???? ???? ????. ??? ??? ?? ?? ??? ???? ??? ?? ?? ?? ??? ? ????.

6. ???? ????? ??

Zustand? ??? ???? ??? ???? ????. ??? ?? ??? ??? ? ??? Zustand? ?? ??? ?? ?? ?? ???? ??? ? ????. ?? ???? ?? ??? ???? ?????? ??? ??? ? ?? ??? ???? ?????.

---

4. Zustand? React? ??

Zustand? React ??????? ???? ?? ?? ?????. ??? React ??? Zustand? ???? ??? ??????.

1??: Zustand ??

Zustand? ????? ?? ??? ?????.

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

2??: ??? ???

?????? ??? ??? ???? ???? ????. ??? ??? ??? ??? ????.

import React from 'react';
import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

3??: ?????? Store ??

?? ???? ?????? useStore ??? ???? React ?? ??? ??? ??? ???? ? ????.

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

• ? ??? useStore? ?? ???? ??? ??(?? ? ??) ??? ????? ? ?????.

4??: ??? ???? ??

????? ??? Counter ????? ???? ? ????.

npm install zustand

---

5. Zustand? ?? ??

1. ????

Zustand? localStorage, sessionStorage ?? ?? ?? ????? ??? ???? ????? ?????.

?:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

• ? ????? ??? ??? localStorage? ????? ???? ?? ??? ??? ??? ?????.

2. ?? ?? ??

Zustand? ???? ??? ????? ??? ?? ??? ????? ?? ?? ??? ??? ? ????.

?:

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

• ???? ??? ? ?? ???? ?? ? ?? ?? ???? ????. ?????? ????? ???? ??? ? ????.

---

6. ??

Zustand? React ??????? ?? ??? ?? ???? ???? ??? ??? ???? ?????. ???? ????? ?? ??? ? ??? React ? ??? ??? ?????. ??? ?? ??? ?????? Zustand? ???? ?? ?? ?? ?????? ???? ??? ?? ?? ?????? ??? ??? ? ??? ????.

?? ??? ??? ???????? ???? Zustand? React?? ??? ??? ? ?? ??? ????? ?? ??? ??? ?????.

---

? ??? Zustand: React? ?? ???? ??? ?? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!