IMS with TS (version2) 회고록 1

import { Routes } from "react-router";
import { routeNav } from "./Util/Navigate";
import { useReducer } from "react";
import { itemDispatch } from "./Util/ItemDispatch";

function App() {
  const [itemList, dispatchItemList] = useReducer(itemDispatch, []);

  return (
    <div className="App">
      <Routes>{routeNav()}</Routes>
    </div>
  );
}

export default App;

import { Item } from "../types";
import {
  AddItemListProps,
  DeleteItemListProps,
  UpdateItemListProps,
} from "../types";
import { validateUsingBoolean } from "./Validate";

type ItemListAction =
  | {
      type: "CREATE",
      data: AddItemListProps,
    }
  | {
      type: "UPDATE",
      data: UpdateItemListProps,
    }
  | {
      type: "DELETE",
      data: DeleteItemListProps,
    };

export const findIndex = (list: Item[], targetId: string) => {
  return list.findIndex((item) => item.id === targetId);
};

export const itemDispatch = (state: Item[], action: ItemListAction) => {
  switch (action.type) {
    case "CREATE": {
      const index = findIndex(state, action.data.id);
      if (index === -1) {
        return [...state, action.data];
      } else {
        state[index].quantity += Number(action.data.quantity);
        return [...state];
      }
    }
    case "UPDATE": {
      const index = findIndex(state, action.data.id);
      validateUsingBoolean(index === -1);

      const newId = `${state[index].barcode}-${action.data.updateLocation}-${state[index].expDate}`;
      if (state[index].quantity === action.data.updateQuantity) {
        state.splice(index, 1);
        return [
          ...state,
          {
            ...state[index],
            id: newId,
            location: action.data.updateLocation,
            quantity: action.data.updateQuantity,
          },
        ];
      } else {
        state[index].quantity -= Number(action.data.updateQuantity);
        return [
          ...state,
          {
            ...state[index],
            id: newId,
            location: action.data.updateLocation,
            quantity: action.data.updateQuantity,
          },
        ];
      }
    }
    case "DELETE": {
      const index = findIndex(state, action.data.id);
      validateUsingBoolean(index === -1);
      state.splice(index, 1);
      return [...state];
    }
  }
};

    const handleAddItemList = useCusHook({"CREATE", AddItemListProps, dispatchItemList});

->
export const itemListSelectorFamily = selectorFamily({
  key: "itemListSelectorFamily",
  set:
    ({ type, data }: ItemListAction) =>
    ({ get, set }, newItemListState: Item[]) => {
      const itemList = get(itemListState);
      switch (type) {
        case "CREATE": {
          const index = findIndex(itemList, data.id);
          if (index === -1) {
            newItemListState = [...itemList, data];
          } else {
            newItemListState[index].quantity += Number(data.quantity);
          }
          break;
        }
        case "UPDATE": {
          const index = findIndex(itemList, data.id);
          validateUsingBoolean(index === -1);

          const newId = `${itemList[index].barcode}-${data.updateLocation}-${itemList[index].expDate}`;
          if (itemList[index].quantity === data.updateQuantity) {
            newItemListState = itemList.splice(index, 1);
            newItemListState = [
              ...itemList,
              {
                ...itemList[index],
                id: newId,
                location: data.updateLocation,
                quantity: data.updateQuantity,
              },
            ];
          } else {
            itemList[index].quantity -= Number(data.updateQuantity);
            newItemListState = [
              ...itemList,
              {
                ...itemList[index],
                id: newId,
                location: data.updateLocation,
                quantity: data.updateQuantity,
              },
            ];
          }
          break;
        }
        case "DELETE": {
          const index = findIndex(itemList, data.id);
          validateUsingBoolean(index === -1);
          newItemListState = itemList.splice(index, 1);
          break;
        }
      }
      set(itemListState, newItemListState);
    },
});

-> 여기서부터 코드가 맘에 들지 않았다.

import { DefaultValue, selector, selectorFamily } from "recoil";
import { Item } from "../types";
import {
  AddItemListProps,
  DeleteItemListProps,
  UpdateItemListProps,
} from "../types";
import { validateUsingBoolean } from "../Util/Validate";
import { itemListState } from "../Atom/atoms";

type ItemListAction =
  | {
      type: "CREATE";
      data: Readonly<AddItemListProps>;
    }
  | {
      type: "UPDATE";
      data: Readonly<UpdateItemListProps>;
    }
  | {
      type: "DELETE";
      data: Readonly<DeleteItemListProps>;
    };

export const findIndex = (list: Item[], targetId: string) => {
  return list.findIndex((item) => item.id === targetId);
};

export const itemListSelector = selector({
  key: "itemListSelector",
  get: ({ get }) => {
    return get(itemListState);
  },
});

export const itemListSelectorFamily = selectorFamily<Item[], ItemListAction>({
  key: "itemListSelectorFamily",
  get:
    () =>
    ({ get }) => {
      return get(itemListState);
    },
  set:
    ({ type, data }: ItemListAction) =>
    ({ get, set }, newValue: Item[] | DefaultValue) => {
      const itemList = get(itemListState);

      if (!(newValue instanceof DefaultValue) && Array.isArray(newValue)) {
        switch (type) {
          case "CREATE": {
            const index = findIndex(itemList, data.id);
            if (index === -1) {
              newValue = [...itemList, data];
            } else {
              newValue[index].quantity += Number(data.quantity);
            }
            break;
          }
          case "UPDATE": {
            const index = findIndex(itemList, data.id);
            validateUsingBoolean(index === -1);

            const newId = `${itemList[index].barcode}-${data.updateLocation}-${itemList[index].expDate}`;
            if (itemList[index].quantity === data.updateQuantity) {
              newValue = itemList.splice(index, 1);
              newValue = [
                ...itemList,
                {
                  ...itemList[index],
                  id: newId,
                  location: data.updateLocation,
                  quantity: data.updateQuantity,
                },
              ];
            } else {
              itemList[index].quantity -= Number(data.updateQuantity);
              newValue = [
                ...itemList,
                {
                  ...itemList[index],
                  id: newId,
                  location: data.updateLocation,
                  quantity: data.updateQuantity,
                },
              ];
            }
            break;
          }
          case "DELETE": {
            const index = findIndex(itemList, data.id);
            validateUsingBoolean(index === -1);
            newValue = itemList.splice(index, 1);
            break;
          }
        }
        set(itemListState, newValue as Item[]);
      }
    },
});

export type RecoilInterface = {
  getRecoilValue: <T>(RecoilValue<T>) => T,
  getRecoilValueLoadable: <T>(RecoilValue<T>) => Loadable<T>,
  getRecoilState: <T>(RecoilState<T>) => [T, SetterOrUpdater<T>],
  getRecoilStateLoadable: <T>(
    RecoilState<T>
  ) => [Loadable<T>, SetterOrUpdater<T>],
  getSetRecoilState: <T>(RecoilState<T>) => SetterOrUpdater<T>,
  getResetRecoilState: <T>(RecoilState<T>) => Resetter,
};

...
return useMemo(() => {
    function useSetRecoilState<T>(
      recoilState: RecoilState<T>,
    ): SetterOrUpdater<T> {
      if (__DEV__) {
        validateRecoilValue(recoilState, 'useSetRecoilState');
      }
      return (
        newValueOrUpdater: (T => T | DefaultValue) | T | DefaultValue,
      ) => {
        setRecoilValue(storeRef.current, recoilState, newValueOrUpdater);
      };
    }

    function useResetRecoilState<T>(recoilState: RecoilState<T>): Resetter {
      if (__DEV__) {
        validateRecoilValue(recoilState, 'useResetRecoilState');
      }
      return () => setRecoilValue(storeRef.current, recoilState, DEFAULT_VALUE);
    }

    //...
     return {
      getRecoilValue: useRecoilValue,
      getRecoilValueLoadable: useRecoilValueLoadable,
      getRecoilState: useRecoilState,
      getRecoilStateLoadable: useRecoilStateLoadable,
      getSetRecoilState: useSetRecoilState,
      getResetRecoilState: useResetRecoilState,
    };

}, [recoilValuesUsed, storeRef]);
}

function useRecoilValue<T>(recoilValue: RecoilValue<T>): T {
  if (__DEV__) {
    validateRecoilValue(recoilValue, "useRecoilValue");
  }
  const loadable = useRecoilValueLoadable(recoilValue);
  return handleLoadable(loadable, recoilValue, storeRef);
}

const { isRecoilValue } = require("../core/Recoil_RecoilValue");

function validateRecoilValue<T>(
  recoilValue: RecoilValue<T>,
  hookName:
    | $TEMPORARY$string<"useRecoilState">
    | $TEMPORARY$string<"useRecoilStateLoadable">
    | $TEMPORARY$string<"useRecoilState_TRANSITION_SUPPORT_UNSTABLE">
    | $TEMPORARY$string<"useRecoilValue">
    | $TEMPORARY$string<"useRecoilValueLoadable">
    | $TEMPORARY$string<"useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE">
    | $TEMPORARY$string<"useRecoilValue_TRANSITION_SUPPORT_UNSTABLE">
    | $TEMPORARY$string<"useResetRecoilState">
    | $TEMPORARY$string<"useSetRecoilState">
) {
  if (!isRecoilValue(recoilValue)) {
    throw err(
      `Invalid argument to ${hookName}: expected an atom or selector but got ${String(
        recoilValue
      )}`
    );
  }
}

import type { NodeKey } from "./Recoil_State";

// eslint-disable-next-line no-unused-vars
class AbstractRecoilValue<+T> {
  key: NodeKey;
  constructor(newKey: NodeKey) {
    this.key = newKey;
  }
  toJSON(): { key: string } {
    return { key: this.key };
  }
}

class RecoilState<T> extends AbstractRecoilValue<T> {}

class RecoilValueReadOnly<+T> extends AbstractRecoilValue<T> {}

export type RecoilValue<T> = RecoilValueReadOnly<T> | RecoilState<T>;

function isRecoilValue(x: mixed): boolean %checks {
  return x instanceof RecoilState || x instanceof RecoilValueReadOnly;
}

const loadable = useRecoilValueLoadable(recoilValue);

const storeRef = useStoreRef();

function useRecoilValueLoadable<T>(recoilValue: RecoilValue<T>): Loadable<T> {
  if (__DEV__) {
    validateRecoilValue(recoilValue, "useRecoilValueLoadable");
  }
  if (!recoilValuesUsed.current.has(recoilValue.key)) {
    recoilValuesUsed.current = setByAddingToSet(
      recoilValuesUsed.current,
      recoilValue.key
    );
  }
  // TODO Restore optimization to memoize lookup
  const storeState = storeRef.current.getState();
  return getRecoilValueAsLoadable(
    storeRef.current,
    recoilValue,
    reactMode().early
      ? storeState.nextTree ?? storeState.currentTree
      : storeState.currentTree
  );
}

//2. useStoreRef

// The Store is just the interface that is made available via the context.
// It is constant within a given Recoil root.
export type Store = $ReadOnly<{
  storeID: StoreID,
  parentStoreID?: StoreID,
  getState: () => StoreState,
  replaceState: ((TreeState) => TreeState) => void,
  getGraph: (StateID) => Graph,
  subscribeToTransactions: (
    (Store) => void,
    ?NodeKey
  ) => { release: () => void },
  addTransactionMetadata: ({ ... }) => void,
  skipCircularDependencyDetection_DANGEROUS?: boolean,
}>;

export type StoreRef = {
  current: Store,
};

const AppContext = React.createContext < StoreRef > { current: defaultStore };
const useStoreRef = (): StoreRef => useContext(AppContext);

export type StoreState = {
  currentTree: TreeState,
  nextTree: null | TreeState,
  previousTree: null | TreeState,
  ...
};

//3. setByAddingToSet
function setByAddingToSet<V>(set: $ReadOnlySet<V>, v: V): Set<V> {
  const next = new Set(set);
  next.add(v);
  return next;
}

//4. recoilValuesUsed
const recoilValuesUsed = useRef < $ReadOnlySet < NodeKey >> new Set();
recoilValuesUsed.current = new Set(); // Track the RecoilValues used just during this render

//5. getRecoilValueAsLoadble
function getRecoilValueAsLoadable<T>(
  store: Store,
  { key }: AbstractRecoilValue<T>,
  treeState: TreeState = store.getState().currentTree
): Loadable<T> {
  // Reading from an older tree can cause bugs because the dependencies that we
  // discover during the read are lost.
  const storeState = store.getState();
  if (
    !(
      treeState.version === storeState.currentTree.version ||
      treeState.version === storeState.nextTree?.version ||
      treeState.version === storeState.previousTree?.version
    )
  ) {
    recoverableViolation("Tried to read from a discarded tree", "recoil");
  }

  const loadable = getNodeLoadable < T > (store, treeState, key);

  if (loadable.state === "loading") {
    loadable.contents.catch(() => {
      /**
  _ HACK: intercept thrown error here to prevent an uncaught promise exception. Ideally this would happen closer to selector
  _ execution (perhaps introducing a new ERROR class to be resolved by async selectors that are in an error state)
  */
      return;
    });
  }
  return loadable;
}

// Get the current value loadable of a node and update the state.
// Update dependencies and subscriptions for selectors.
// Update saved value validation for atoms.
function getNodeLoadable<T>(
  store: Store,
  state: TreeState,
  key: NodeKey
): Loadable<T> {
  initializeNodeIfNewToStore(store, state, key, "get");
  return getNode(key).get(store, state);
}

function initializeNodeIfNewToStore(
  store: Store,
  treeState: TreeState,
  key: NodeKey,
  trigger: Trigger
): void {
  const storeState = store.getState();
  if (storeState.nodeCleanupFunctions.has(key)) {
    return;
  }
  const node = getNode(key);
  const retentionCleanup = initializeRetentionForNode(
    store,
    key,
    node.retainedBy
  );
  const nodeCleanup = node.init(store, treeState, trigger);
  storeState.nodeCleanupFunctions.set(key, () => {
    nodeCleanup();
    retentionCleanup();
  });
}

function useRecoilValueLoadable<T>(recoilValue: RecoilValue<T>): Loadable<T> {
  if (__DEV__) {
    validateRecoilValue(recoilValue, "useRecoilValueLoadable");
  }
  if (!recoilValuesUsed.current.has(recoilValue.key)) {
    recoilValuesUsed.current = setByAddingToSet(
      recoilValuesUsed.current,
      recoilValue.key
    );
  }
  // TODO Restore optimization to memoize lookup
  const storeState = storeRef.current.getState();
  return getRecoilValueAsLoadable(
    storeRef.current,
    recoilValue,
    reactMode().early
      ? storeState.nextTree ?? storeState.currentTree
      : storeState.currentTree
  );
}

function handleLoadable<T>(
  loadable: Loadable<T>,
  recoilValue: RecoilValue<T>,
  storeRef: StoreRef
): T {
  // We can't just throw the promise we are waiting on to Suspense.  If the
  // upstream dependencies change it may produce a state in which the component
  // can render, but it would still be suspended on a Promise that may never resolve.
  if (loadable.state === "hasValue") {
    return loadable.contents;
  } else if (loadable.state === "loading") {
    const promise = new Promise((resolve) => {
      const suspendedComponentResolvers =
        storeRef.current.getState().suspendedComponentResolvers;
      suspendedComponentResolvers.add(resolve);

      // SSR should clear out the wake-up resolver if the Promise is resolved
      // to avoid infinite loops.  (See https://github.com/facebookexperimental/Recoil/pull/2073)
      if (isSSR && isPromise(loadable.contents)) {
        loadable.contents.finally(() => {
          suspendedComponentResolvers.delete(resolve);
        });
      }
    });

    // $FlowExpectedError Flow(prop-missing) for integrating with tools that inspect thrown promises @fb-only
    // @fb-only: promise.displayName = `Recoil State: ${recoilValue.key}`;

    throw promise;
  } else if (loadable.state === "hasError") {
    throw loadable.contents;
  } else {
    throw err(`Invalid value of loadable atom "${recoilValue.key}"`);
  }
}

export type Loadable<+T> =
  | $ReadOnly<ValueLoadable<T>>
  | $ReadOnly<ErrorLoadable<T>>
  | $ReadOnly<LoadingLoadable<T>>;

class ValueLoadable<T> extends BaseLoadable<T> {
  state: "hasValue" = "hasValue";
  contents: T;

  constructor(value: T) {
    super();
    this.contents = value;
  }
  getValue(): T {
    return this.contents;
  }
  toPromise(): Promise<T> {
    return Promise.resolve(this.contents);
    // ...
  }
}

class ErrorLoadable<T> extends BaseLoadable<T> {
  state: "hasError" = "hasError";
  contents: mixed;

  constructor(error: mixed) {
    super();
    this.contents = error;
  }
  getValue(): T {
    throw this.contents;
  }
  toPromise(): Promise<T> {
    return Promise.reject(this.contents);
  }
  valueMaybe(): void {
    return undefined;
  }
  promiseMaybe(): void {
    return undefined;
  }
  //...
}

class LoadingLoadable<T> extends BaseLoadable<T> {
  state: "loading" = "loading";
  contents: Promise<T>;

  constructor(promise: Promise<T>) {
    super();
    this.contents = promise;
  }
  getValue(): T {
    throw this.contents;
  }
  toPromise(): Promise<T> {
    return this.contents;
  }
  valueMaybe(): void {
    return undefined;
  }
  promiseMaybe(): Promise<T> {
    return this.contents;
  }
  //...
}

class AbstractRecoilValue<+T> {
  key: NodeKey;
  constructor(newKey: NodeKey) {
    this.key = newKey;
  }
  toJSON(): { key: string } {
    return { key: this.key };
  }
}

import { atom, selector, useRecoilValue, useSetRecoilState } from "recoil";

const itemState = atom({
  key: "itemState",
  default: [1, 2, 3, 4, 5],
});

const itemSelector = selector({
  key: "itemSelector",
  get: ({ get }) => get(itemState),
  set: ({ set }, newValue) => set(itemState, newValue),
});

function Component() {
  const allItems = useRecoilValue(itemState);
  const evenItems = useRecoilValue(itemSelector);
  const setItemSelector = useSetRecoilState(itemSelector);

  // itemSelector를 통해 상태 변경
  setItemSelector([1]);

  // 변경 후 상태 출력
  console.log("After update allItems:", useRecoilValue(itemState));
  console.log("After update evenItems:", useRecoilValue(itemSelector));

  return null;
}

// After update allItems: [1]
// After update evenItems: [1]