Selector

Codesandbox Demo
Selector 代表我們的導出狀態 (derived state) ，也就是根據我們現有的某個 state 運算出來的相依 state。
我們可以把Selector function 的 output 想成是根據我們某個 pure function 修改出來的新 state 。

A selector represents a piece of derived state. You can think of derived state as the output of passing state to a pure function that modifies the given state in some way. Recoil

導出狀態 (Derived state) 是個強大的概念，因為它可以依賴某個動態的資料，來建立其他對應的資料。

Derived state is a powerful concept because it lets us build dynamic data that depends on other data Recoil

官網展示的範例：

Step0 建立一個 To Do List 的共享狀態 todoListState (Atom)

預設值是空陣列，裡面將儲存我們所有待辦事項，現在預設已經有其中一件ToDo 遛狗

const todoListState = atom({
  key: 'todoListState',
  default: [{
        id: 'a001',
        text: '遛狗',
        isComplete: false,
      }],
});

Step1 建立一個過濾器的共享狀態 filterState (Atom)

假設我們想做一個 todo list 的 filter，我們首先建立一個 過濾器 的共享狀態 todoListFilterState

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All',
});

Step2 建立一個 被過濾後 To Do List 的共享狀態 filteredTodoListState (Selector)

Codesandbox Demo
有了前述兩個狀態後，我們可以根據 To Do List / Filter 這兩個狀態推算出被過濾之後的 filteredTodoList

在 Selector 裡面我們給訂一個物件 {key:狀態的鍵值,get:取得狀態的方法}

get 這個屬性我們傳入一個方法 ( {get} )=>{ do some computing with some state }
get 方法當中，我們可以再從 Recoil 拿到 get function，透過這個 get function ，我們可以從 Recoil 內部拿出我們其他的共享狀態。

在範例裡，我們透過 get 拿到 to do list 跟 filter 這兩個狀態，裡面再給一個 pure function switch case 藉由這兩個狀態算出 過濾後的 To do List。

當 To Do List (todoListState) 或 過濾器 (filterState) 其中一個狀態有改變時，我們的Selector就會被觸發，重新運算新的 被過濾後 To Do List (filteredTodoListState)。

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

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

Codesandbox Demo