最終更新:2024-06-20 (木) 05:40:36 (25d)  

recoil/selector
Top / recoil / selector

Recoil/セレクタ

https://recoiljs.org/docs/basic-tutorial/selectors/

https://recoiljs.org/docs/api-reference/core/selector/

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue,
    getCallback: GetCallback,
  }) => T | Promise<T> | Loadable<T> | WrappedValue<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
  cachePolicy_UNSTABLE?: CachePolicy,
})

  • const filteredTodoListState = selector({
      key: 'FilteredTodoList',
      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;
        }
      },
    });

key

get

  • get: GetRecoilValue?

set

  • get: GetRecoilValue?
  • set: SetRecoilState?
  • reset: ResetRecoilState?

値の取得