Redux ToolkitのRTK Queryを使ったシンプルなReact Nativeアプリを作ってみた

公式DocにPokemon APIの例が載っているが、練習のためにFakeStoreApiを使ってできる限りシンプルなモバイルアプリをExpo Snack上に作ってみた。

RTK Queryを使ってAPIにアクセスして、エラーがなければ商品のタイトルと画像を表示する。

ほぼ公式Doc通りに使ったので複雑なことはなかったが、エクスポートされるFunctionの名前が自動生成される説明を見落とし少し混乱した。

product.js

export const fakeApi = createApi({
  ~
    getAllProducts: builder.query({
      query: () => `products/`,
    }),
  ~
  }),
})

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetAllProductQuery } = fakeApi;

export hooksはauto-generatedとあり、
形としては 「use + PropertyName + Query」になる。

builder.queryで作られたgetAllProductsはエクスポート用には
「useGetAllProductQuery」になる。
GetのGが大文字なのも注意。

次はTypeScriptバージョンも練習したい。