قراءة حالة المتجر وتحديثها في المكوّنات

import { useCounterStore } from '../stores/counterStore';

export default function CounterScreen() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);

  return (
    <View style={styles.container}>
      <Text style={styles.count}>{count}</Text>
      <Button title='Increment' onPress={increment} />
      <Button title='Decrement' onPress={decrement} />
    </View>
  );
}

import { shallow } from 'zustand/shallow';

// Option 1: multiple hooks (preferred for 2-3 values)
const count = useCounterStore((s) => s.count);
const status = useCounterStore((s) => s.status);

// Option 2: shallow equality for multiple values at once
const { count, status } = useCounterStore(
  (s) => ({ count: s.count, status: s.status }),
  shallow
);

export default function TodoInput() {
  const [text, setText] = React.useState('');
  const addTodo = useTodoStore((state) => state.addTodo);

  const handleAdd = () => {
    if (text.trim()) {
      addTodo(text.trim());
      setText('');
    }
  };

  return (
    <View>
      <TextInput value={text} onChangeText={setText} placeholder='New todo' />
      <Button title='Add' onPress={handleAdd} />
    </View>
  );
}

export default function TodoList() {
  const todos = useTodoStore((state) => state.todos);
  const removeTodo = useTodoStore((state) => state.removeTodo);

  return (
    <FlatList
      data={todos}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => removeTodo(item.id)}>
          <Text>{item.text}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

export const useProfileStore = create<ProfileStore>((set) => ({
  profile: {
    name: '',
    bio: '',
    avatar: null,
  },
  updateName: (name: string) =>
    set((state) => ({ profile: { ...state.profile, name } })),
  updateBio: (bio: string) =>
    set((state) => ({ profile: { ...state.profile, bio } })),
}));

toggleLike: async (postId: string) => {
  // Update UI immediately
  set((state) => ({
    posts: state.posts.map((p) =>
      p.id === postId ? { ...p, liked: !p.liked } : p
    ),
  }));
  try {
    await api.toggleLike(postId);
  } catch {
    // Revert on failure
    set((state) => ({
      posts: state.posts.map((p) =>
        p.id === postId ? { ...p, liked: !p.liked } : p
      ),
    }));
  }
}

const initialState = { user: null, token: null, isLoggedIn: false };

export const useAuthStore = create<AuthStore>((set) => ({
  ...initialState,
  login: (user, token) => set({ user, token, isLoggedIn: true }),
  logout: () => set(initialState), // restore all fields to initial values
}));

useEffect(() => {
  const unsubscribe = useSettingsStore.subscribe(
    (state) => state.theme,
    (theme) => {
      console.log('Theme changed to:', theme);
      AsyncStorage.setItem('theme', theme);
    }
  );
  return unsubscribe; // cleanup on unmount
}, []);

// ScreenA.tsx — writes to store
const setSelectedProduct = useProductStore((s) => s.setSelected);
<Button title='View Details' onPress={() => {
  setSelectedProduct(product);
  navigation.navigate('ProductDetail');
}} />

// ScreenB.tsx — reads from store
const product = useProductStore((s) => s.selected);

import { useCounterStore } from '../counterStore';

before Each(() => {
  useCounterStore.getState().reset();
});

test('increment increases count by 1', () => {
  useCounterStore.getState().increment();
  expect(useCounterStore.getState().count).toBe(1);
});

test('reset brings count back to 0', () => {
  useCounterStore.setState({ count: 5 });
  useCounterStore.getState().reset();
  expect(useCounterStore.getState().count).toBe(0);
});

export const useFormStore = create<FormStore>((set) => ({
  step: 1,
  name: '',
  email: '',
  password: '',
  setField: (field, value) => set({ [field]: value }),
  nextStep: () => set((state) => ({ step: state.step + 1 })),
  reset: () => set({ step: 1, name: '', email: '', password: '' }),
}));