Selectors

Selector 是一組純函數 (Pure function, 註：純函數意指相同的input，永遠會回傳一樣的output，沒有任何副作用(side effect))

Selector 接受 atoms (共享的狀態) 跟其他的 selectors (共享的狀態) 作為input，然後在裡面做一點運算，轉換成我們需要的狀態( derived state )回傳output。

當上游 input 傳入的這些狀態被更新、發生改變時，selector function 會被重新評估。就像 atoms 一樣，元件也可以訂閱 selectors ，而且當selectors 改變時，元件也會被重新渲染。

selectors 是基於 state ( atom / selectors ) 來計算成我們需要的資料。這樣子我們就可以避免建立多餘的 state ，常常也不用再透過 reducer 來保持 state 的同步與正確性。

除此之外，當所有 state 都是被需要的時候，有了 selectors 之後，我們可以將 atom 最小化、精簡化，除了藉由 selectors 算出我們需要的資料，這些 selectors 也會持續追蹤哪些元件訂閱它、追蹤自己依賴的 state ( atom / selectors )， selectors 的存在使我們的程式碼能以 functional 途徑(approach) 提升效率。

Selector ，可以透過 Recoil 官方提供的API ，selector 這個 function 被建立。

const lengthState = atom({
  key: "length",
  default: 0
});
const circularAreaState = selector({
  key: "circularArea",
  get: ({ get }) => {
    return get(lengthState) * get(lengthState) * 3.14;
  }
});

從元件的角度而言， atom / selector 使用的介面是相同的，因此我們可以輕易地將 atom 轉成 selector 或是 selector 轉成 atom 。

  const [length, setLength] = useRecoilState(lengthState);
  const circularArea = useRecoilValue(circularAreaState);