LoginSignup
0

More than 1 year has passed since last update.

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

Posted at

公式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バージョンも練習したい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0