Zustand là gì ? Sơ lược về Zustand

1. Zustand là gì ?

• Zustand là một thư viện state management trong React. Nó cho phép bạn quản lý trạng thái của ứng dụng của bạn một cách dễ dàng và linh hoạt.
• Zustand là một state management tool đơn giản, nó cho phép bạn quản lý trạng thái dễ dàng bằng cách sử dụng hook và store.
• Zustand không yêu cầu bạn sử dụng bất kỳ concept hay hoạt động phức tạp nào để quản lý trạng thái.
• Với Zustand, bạn có thể tạo một store với giá trị ban đầu, và sau đó có thể truy cập hoặc cập nhật trạng thái từ bất kỳ component nào trong ứng dụng của bạn. Zustand cung cấp một số hook như useStore hoặc useState để truy cập và cập nhật trạng thái.

2. Ưu điểm so với Redux?

• Cấu trúc đơn giản, dễ dàng implement và sử dụng.
• Zustand chỉ re-render lại component khi có sự thay đổi state.
• Zustand quản lý state tập trung ở một chỗ, điểm này tương đồng với Redux, nhưng khác với Redux phải tạo action, reducer và dispatch action để handle thay đổi state thì Zustand lại làm nó một cách dễ dàng hơn, chỉ cần store là đủ.
• Sử dụng hooks để tạo store, phù hợp với cấu trúc dự án sử dụng Hooks ở hiện tại.
• Clean code, ngắn gọn trong cách triển khai và dễ đọc code.

3. Ví dụ

Ví dụ 1 : Tạo một store để quản lý trạng thái counter:

// store.js
import create from 'zustand';

export const useCounterStore = create(set => ({
    count: 0,
    increase: () => set((state: any) => ({count: state.count + 1})),
    decrease: () => set((state: any) => ({count: state.count - 1})),
}));

// App.js
import {Button, View, Text} from 'react-native';
import {useCounterStore} from './src/zustand/store';

const App = () => {
const {count, increase, decrease} = useCounterStore();

return (
        <>
            <View>
                <Text>{count}</Text>
                <Button title={'Increase'} onPress={increase}></Button>
                <Button title={'Decrease'} onPress={decrease}></Button>
            </View>
        </>
    );
};

export default App;

Ví dụ 2: Tạo một store để quản lý trạng thái người dùng:

// App.js
import { create } from 'zustand';

const nameStore = create(set => ({
  name: '',
  updateName: value => set(state => ({...state, name: value})),
}));


const App = () => {
 
 const {name, updateName} = nameStore();
  
 const [inputValue, setInputValue] = useState('');
 
 
  const handleSubmit = () => {
    updateName(inputValue);
    setInputValue('');
  };
  
  return (
    <>
       <TextInput
            placeholder="Enter name here"
            value={inputValue}
            onChangeText={value => setInputValue(value)}
      />
      <Button title="Submit" onPress={handleSubmit} />
      <Text>{name}</Text>
    </>
  );
};

export default App;

4. Kết luận

Tổng quan, Zustand là một lựa chọn tuyệt vời cho việc quản lý trạng thái trong React vì nó đơn giản, dễ sử dụng và cung cấp một cách linh hoạt để truy cập và cập nhật trạng thái.