Recoilの使い方

リコールはフェイスブック上で作成され、応答のためのステータス管理ライブラリです。

リドスのようにボイラプレートが多くなく、本当に必要なコードを複数のstoreに構成するだけなので、開発効率と効率を向上させ、プロジェクトに導入したいと考えています.

RecoilRoot

RecoilRootはプロバイダと同じです.

<RecoilRoot>
  <App />
</RecoilRoot>

両者の最大の違いは、プロジェクト内で1つのベンダーだけが宣言できるが、RecoilRootは数量に制限されないことです.
したがって、ステータス変更が発生したときにすべてのリポジトリが変わらないように、個別のリポジトリを作成して、ステータスの検出と変更をより効率的に行うことができます.

atom

「≪リカバリ|Recovery|emdw≫」で、ステータスをatomとして定義します.

export const tabState = atom<keyof IState['sector']>({
  key: 'tabState',
  default: 'opinion',
})

keyには一意の値が含まれている必要があります.
defaultには初期値が含まれます.
atomの基本的な定義方法はこれらです.
本当に簡単
このように定義して使用すると、usStateを使用するようになります.

const [tab, setTab] = useRecoilState(tabState)

これにより、tabは状態になり、settabはsetterになります.
非同期でロードしたデータを初期値として使用する場合

const stateWithAsyncDefault = selector({
  key: 'AsyncDefault',
  get: async () => {
    const data = await get()

    const newSector = data.sector.reduce(
      (prev: IState['sector'], sec: ISector, index: number) => ({
        ...prev,
        [TYPE[index]]: sec,
      }),
      {}
    )

    const newContent: IState['content'] = {
      opinion: [],
      youtube: [],
      insight: [],
    }

    data.content.forEach((content: IContent) => {
      newContent[TYPE[content.sector_id - 1]].push(content)
    })

    return {
      sector: newSector,
      content: newContent,
    }
  },
})

export const appState = atom<IState>({
  key: 'appState',
  default: stateWithAsyncDefault,
})

上のセレクタのgetロジックは、非同期でデータをロードし、インタフェースに調整することによって返される部分です.
このようにセレクタを定義しatomのデフォルト値とすると、非同期データは初期値に入ります.

selector

セレクタは、通常、原子の一部をインポートしたり、他の演算で返す必要がある場合に使用されます.
また、上記のように非同期でデータをロードすることもできる.
セレクタにはsetとget propertyが存在し、getを使用する場合にのみ、読み取り専用メソッドuserRecoilValueしか使用できません.
set構成を定義する場合はuserRecoilStateを使用します.
非同期ロードの場合、これは時間のかかるタスクであるため、ロード処理が必要であることに注意してください.

<RecoilRoot>
  <Suspense fallback={<LoadingIndicator />}>
    <App />
  </Suspense>
</RecoilRoot>

React 18の正式なリリースはSuspence機能をサポートし、Suspence処理プロセスを簡素化した.
次に、非同期セレクタではなくセレクタを一般的に使用する方法を見てみましょう.

export const contentSelector = selector<IContent[]>({
  key: 'contentSelector',
  get: ({ get }) => get(appState).content[get(tabState)],
  set: ({ set, get }, newContent) => {
    set(appState, (prev) => ({
      ...prev,
      content: {
        ...prev.content,
        [get(tabState)]: newContent,
      },
    }))
  },
})

key、get、set propertyを宣言して、ステータスの一部をgetに返します.
上にappStateというatomが定義されており、このセレクタはappStateの一部を取得しています.
set propertyは重要です.
セレクタは、最終的にatomによって定義されたステータスの一部を取得します.

したがって、セレクタのsetterも、最終的にatomで定義されたステータスの一部を変更してから、変更を維持する必要があります。

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

これはsetのインタフェースです.optsオブジェクトでは、set、get、resetを使用して、ステータスを変更、インポート、初期化できます.
また、atomによって定義されたステータスの一部をnewValueで置き換えることもできます.

export interface IState {
  sector: {
    opinion: ISector
    youtube: ISector
    insight: ISector
  }
  content: {
    opinion: IContent[]
    youtube: IContent[]
    insight: IContent[]
  }
}

私の場合、Content Selectorは最終的にISTATEインタフェースが適用されたAppStateでコンテンツオブジェクトの一部を置き換えます.

set(appState, (prev) => ({
  ...prev,
  content: {
    ...prev.content,
    [get(tabState)]: newContent,
  },
}))

USStateのsetterのように、prevでappStateの一部のみを可変に変更するためにステータス変更関数を定義しています.
可変変更を行う場合は、redusのようなredsツールパッケージの方法を使用できますが、この方法は推奨されません.
コイルの概念は原子的に状態を宣言することである.
可変性自体は,コイルのコア概念と一致しない構造の複雑な状態を簡単に変えるためである.

注意事項

Recoilからインポートしたデフォルトはフリーズ状態です.これは変更自体ではありません.

完全に深くコピーするには、先に置き換えてsetterに入れる必要があります。

そこでlodashを使用して深度コピーを行い、必要な値を変更してsetterに入れました.

const [contentSelect, setContentSelect] = useRecoilState(contentSelector)
const newContents = _.cloneDeep(contentSelect)
const likedContent = newContents.find(
  (content: IContent) => content.id === id
) as IContent

if (likedContent.liked) {
  likedContent.liked = false
  likedContent.like_cnt -= 1
} else {
  likedContent.liked = true
  likedContent.like_cnt += 1

setContentSelect(newContents)

このような深い複製を行わなければObject is not extensibleに現れる.

に感銘を与える

Recoilのメリットとデメリットは明らかです.
これは明らかにボイラプレートがなく、原子化して状態を配置することができ、グローバル状態を迅速に管理できるため、大きな利点である.
ただし、プロジェクト規模の拡大とグローバル管理構造の複雑化に伴い、redsとredsツールパッケージの組み合わせがより良いと考えられる場合があります.
原子符号化は,状態の構造がますます複雑になるにつれて,追加されるコード量もますます多くなることを意味する.
最後に、プロジェクトのステータス管理の概念に基づいて、後部座席は非常に良いステータス管理ツールになると思います.