React Native : Mengenal Zustand State Management Sederhana

Jika Anda belum pernah mendengar tentang Zustand tetapi masih terbangun dari teror malam dengan Redux sebagai penjahat utama, Anda harus benar-benar berteman dengan beruang pengacau ini. Hanya perlu TIGA MENIT untuk menyiapkannya, fleksibel dan tanpa pendapat, dan bisa dibilang paling sederhana untuk dipahami dan digunakan. Jadi bersabarlah saat saya mendemonstrasikan cara menggunakan Zustand hari ini.

Apa itu state?

State adalah sepotong informasi yang disimpan oleh perangkat lunak kami untuk mencerminkan perubahan yang terjadi saat sedang beroperasi dan selama interaksi pengguna. Mari kita lihat apa yang benar-benar dapat dipertahankan daripada memberikan definisi Wikipedia lain yang membosankan:

1. informasi tentang pengguna yang masuk

2. daftar produk yang diambil dari backend,

3. flag yang menunjukkan apakah bilah navigasi terbuka atau tertutup,

4. dan total biaya semua item di keranjang belanja pengguna.

Di aplikasi React, kami memisahkan State menjadi dua kategori.

Local State

Status yang terkait erat dengan komponen yang mengubah tampilan UI. Keadaan ini tidak harus dibagi oleh semua komponen. Contoh yang bagus adalah menandai status navbar dari daftar di atas. Anda tidak perlu khawatir tentang membagikan informasi ini karena bilah navigasi mungkin satu-satunya komponen yang memperhatikannya.

Global State

Status ini, di sisi lain, berisi data yang dapat digunakan oleh banyak komponen hierarki dalam program Anda.

Apa itu Zustand?

Zustand adalah manajemen state yang dibuat oleh desainer Jotai dan React-spring.

Zustand state manajemen yang tergolong kecil, cepat, dan dapat diskalakan menggunakan prinsip fluks yang disederhanakan. Memiliki API yang nyaman berdasarkan pengait, bukan boilerplate atau opini.

Store.js

import create from 'zustand';

const initialState = {
  firstName: 'John',
  lastName: 'Snow',
};
// Log every time state is changed
const log = (config) => (set, get, api) =>
  config(
    (...args) => {
      console.log('  applying', args);
      set(...args);
      console.log('  new state', get());
    },
    get,
    api
  );

const useStore = create(
  log((set, get) => ({
    ...initialState,

    setFirstName: (firstName) => set({ firstName }),
    setLastName: (lastName) => set({ lastName }),

    getLastName: () => {
      const name = get().firstName;
      console.log('name', name);
    },

    reset: () => {
      set(initialState);
    },
  }))
);

export default useStore;

// const firstName = useStore((state) => state.firstName);
// const lastName = useStore((state) => state.lastName);
// const setFirstName = useStore((state) => state.setFirstName);
// const setLastName = useStore((state) => state.setLastName);

App.js

import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import useStore from './store';

export default function App() {
  const firstName = useStore((state) => state.firstName);
  const lastName = useStore((state) => state.lastName);
  const setFirstName = useStore((state) => state.setFirstName);
  const setLastName = useStore((state) => state.setLastName);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Zustand Example</Text>
      <Card style={styles.card}>
        <View style={styles.form}>
          <Text>Name</Text>
          <TextInput
            style={styles.input}
            onChangeText={(val) => setFirstName(val)}
            value={firstName}
          />
          <TextInput
            style={styles.input}
            onChangeText={(val) => setLastName(val)}
            value={lastName}
          />
        </View>

        <Text style={styles.result}>{`Result : ${firstName} ${lastName}`}</Text>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

  title: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  card: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  form: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  result: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 24,
  },
  input: {
    height: 40,
    margin: 5,
    borderWidth: 1,
    padding: 10,
    width: 100,
  },
});

Snack Link : https://snack.expo.dev/@rudiahmad/react-native-zustand-sample