Recoil Notları ve İpuçları

İçindekiler

1. Giriş
2. Temel Kavramlar
3. Atomlar
4. Seçiciler
5. Kancalar
6. Asenkron Sorgular
7. Durum Sürekliliği
8. Geliştirici Araçları
9. En İyi Uygulamalar
10. İleri Düzey Kalıplar

Giriş

Recoil, Facebook tarafından geliştirilen React uygulamaları için bir durum yönetim kütüphanesidir. React bileşenlerini verimli bir şekilde güncelleyen bir veri akışı grafiği oluşturmayı sağlar.

Temel Kavramlar

RecoilRoot

Recoil kullanmak için React uygulamanızı RecoilRoot ile sarın:

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      {/* Uygulama bileşenleriniz */}
    </RecoilRoot>
  );
}

Atomlar

Atomlar, Recoil'deki durum birimleridir. Güncellenebilir ve abone olunabilirler.

Bir Atom Oluşturma

import { atom } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0,
});

Bir Atom Kullanma

import { useRecoilState } from 'recoil';

function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  
  return (
    <div>
      <p>Sayım: {count}</p>
      <button onClick={() => setCount(count + 1)}>Artır</button>
    </div>
  );
}

Seçiciler

Seçiciler, atomlara veya diğer seçicilere dayalı olarak durumu türeten saf fonksiyonlardır.

Sadece Okunur Seçici

import { selector } from 'recoil';

const doubleCountState = selector({
  key: 'doubleCountState',
  get: ({get}) => {
    const count = get(counterState);
    return count * 2;
  },
});

Yazılabilir Seçici

import { selector } from 'recoil';

const fahrenheitState = selector({
  key: 'fahrenheitState',
  get: ({get}) => {
    const celsius = get(celsiusState);
    return (celsius * 9) / 5 + 32;
  },
  set: ({set}, newValue) => {
    const celsius = ((newValue - 32) * 5) / 9;
    set(celsiusState, celsius);
  },
});

Kancalar

Recoil, atomlar ve seçicilerle etkileşimde bulunmak için çeşitli kancalar sağlar.

useRecoilState

const [value, setValue] = useRecoilState(myAtom);

useRecoilValue

const value = useRecoilValue(myAtom);

useSetRecoilState

const setValue = useSetRecoilState(myAtom);

useResetRecoilState

const resetValue = useResetRecoilState(myAtom);

Asenkron Sorgular

Recoil, seçiciler kullanarak asenkron veri çekme işlemlerini yönetebilir.

const userInfoQuery = selector({
  key: 'userInfoQuery',
  get: async ({get}) => {
    const userId = get(userIdState);
    const response = await fetch(`/api/user/${userId}`);
    return response.json();
  },
});

function UserInfo() {
  const userInfo = useRecoilValue(userInfoQuery);
  
  if (userInfo.loading) {
    return <div>Yükleniyor...</div>;
  }
  
  return <div>{userInfo.name}</div>;
}

Durum Sürekliliği

Recoil, atomlar ve efektler kullanarak kolay durum sürekliliği sağlar.

import { atom, useSetRecoilState } from 'recoil';
import { useEffect } from 'react';

const persistedState = atom({
  key: 'persistedState',
  default: JSON.parse(localStorage.getItem('persistedState')) || {},
});

function PersistenceObserver() {
  const setState = useSetRecoilState(persistedState);
  
  useEffect(() => {
    const savedValue = JSON.parse(localStorage.getItem('persistedState'));
    if (savedValue) {
      setState(savedValue);
    }
  }, [setState]);
  
  useEffect(() => {
    return persistedState.subscribe(({nextValue}) => {
      localStorage.setItem('persistedState', JSON.stringify(nextValue));
    });
  }, []);
  
  return null;
}

Geliştirici Araçları

Recoil, durumu hata ayıklama ve inceleme için yerleşik geliştirici araçları sağlar.

import { useRecoilSnapshot } from 'recoil';

function DebugObserver() {
  const snapshot = useRecoilSnapshot();
  useEffect(() => {
    console.debug('Aşağıdaki atomlar değiştirildi:');
    for (const node of snapshot.getNodes_UNSTABLE({isModified: true})) {
      console.debug(node.key, snapshot.getLoadable(node));
    }
  }, [snapshot]);

  return null;
}

En İyi Uygulamalar

1. Atomlar ve seçiciler için anlamlı anahtarlar kullanın.
2. Atomları küçük ve odaklanmış tutun.
3. Türemiş durum için seçicileri kullanın.
4. Gereksiz durumlardan kaçının.
5. UI'ye özgü durumlar için React'in yerel durumunu kullanın.
6. Büyük uygulamalar için dinamik ithalat ile kod bölmeyi kullanın.

İleri Düzey Kalıplar

Atomlar Ailesi

const todoListState = atomFamily({
  key: 'todoListState',
  default: id => ({
    id,
    text: '',
    isComplete: false,
  }),
});

function TodoItem({id}) {
  const [todoItem, setTodoItem] = useRecoilState(todoListState(id));
  // ...
}

Hesaplanan Seçiciler

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Tamamlanan':
        return list.filter((item) => item.isComplete);
      case 'Tamamlanmayan':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

Bağımlı Asenkron Seçiciler

const currentUserInfoQuery = selector({
  key: 'currentUserInfoQuery',
  get: async ({get}) => {
    const userId = get(currentUserIDState);
    const response = await fetch(`/api/user/${userId}`);
    return response.json();
  },
});