Redux on いつかの熊右衛門

Redux Toolkit の RTK Query を定周期に実行する

Sat, 18 Dec 2021 17:19:33 +0900

以前 RTK Query を使ってみましたが、定周期で実行することができるようなので試しました。

テンプレートの作成

create-react-app でテンプレートを作成します。
create-react-app のバージョンを指定しているのはエラーを回避する為です。
v5.0.0が最近(2021/12/14)出たばかりだからかと思います。

npx create-react-app@5.0.0 my-app --template redux-typescript

APIの準備

定期的に取得して結果に違いが出そうな API として、Yahoo! JAPAN Webサービスの気象情報API を利用します。
利用には固有のアプリケーションIDを取得する必要があります。

RTK Query のコードを追加

テンプレートに追加/修正するファイルは以下の４ファイルです。

src/app/services/weather/index.ts
src/app/services/weather/type.ts
src/app/store.ts
src/App.tsx

気象情報APIを実行するコードを以下のように作成しました。
渡した座標（Coordinates）の天気（Weather）を返します。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Coordinates, Weather } from './type';

const appId = '(取得した固有のアプリケーションID)';

export const weatherApi = createApi({
 reducerPath: 'weatherApi',
 baseQuery: fetchBaseQuery({ baseUrl: 'https://map.yahooapis.jp/weather/V1/' }),
 endpoints: (builder) => ({
 getWeather: builder.query<Weather, Coordinates>({
 query: (coordinates: Coordinates) => {
 const {
 latitude,
 longitude,
 } = coordinates;
 return `place?output=json&past=1&coordinates=${longitude},${latitude}&appid=${appId}`;
 } ,
 }),
 }),
});

export const { useGetWeatherQuery } = weatherApi;

Weather の定義は以前紹介した「Paste JSON as Code」を利用し、Coodinates を含め以下のようにしました。

export interface Coordinates {
 latitude: number;
 longitude: number;
}

export interface Weather {
 ResultInfo: ResultInfo;
 Feature: Feature[];
}

export interface Feature {
 Id: string;
 Name: string;
 Geometry: Geometry;
 Property: Property;
}

export interface Geometry {
 Type: string;
 Coordinates: string;
}

export interface Property {
 WeatherAreaCode: number;
 WeatherList: WeatherList;
}

export interface WeatherList {
 Weather: Weather[];
}

export interface Weather {
 Type: string;
 Date: string;
 Rainfall: number;
}

export interface ResultInfo {
 Count: number;
 Total: number;
 Start: number;
 Status: number;
 Latency: number;
 Description: string;
 Copyright: string;
}

そして、作成した Reducer を既存の store に加えました。

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import { weatherApi } from './services/weather';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 [weatherApi.reducerPath]: weatherApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat(weatherApi.middleware),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,
 unknown,
 Action<string>
>;

表示部分の作成

既存の App.tsx を以下のように変更しました。

import React, { useState } from 'react';
import { useGetWeatherQuery } from './app/services/weather';

const intervalOptions = [
 { label: 'Off', value: 0 },
 { label: '1分', value: 1 * 60 * 1000 },
 { label: '10分', value: 10 * 60 * 1000 },
 { label: '30分', value: 30 * 60 * 1000 },
];

const Types: { [key: string]: string } = {
 observation: '実測値',
 forecast: '予測値',
};

export function App() {
 const [latitude, setLatitude] = useState(35.663613);
 const [longitude, setLongitude] = useState(139.732293);
 const [pollingInterval, setPollingInterval] = useState(60000);
 const { data, error, isLoading } = useGetWeatherQuery({
 latitude,
 longitude,
 }, { pollingInterval });
 const now = new Date();
 return (
 <>
 <div>
 <label>更新間隔</label>
 <select
 value={pollingInterval}
 onChange={({ target: { value } }) =>
 setPollingInterval(Number(value))
 }
 >
 {intervalOptions.map(({ label, value }) => (
 <option key={value} value={value}>
 {label}
 </option>
 ))}
 </select>
 </div>
 <div>
 <label>経度</label><input type="text" value={longitude} onChange={(e) => setLongitude(Number(e.target.value))} />
 </div>
 <div>
 <label>緯度</label><input type="text" value={latitude} onChange={(e) => setLatitude(Number(e.target.value))} />
 </div>
 {
 error
 ? 'Error.'
 : isLoading
 ? 'Loading...'
 : data && data.Feature
 .map(feature => <>
 <div>{feature.Name}</div>
 <table>
 <caption>{now.toLocaleDateString()} {now.toLocaleTimeString()} 更新</caption>
 <thead>
 <tr>
 <th>区分</th>
 <th>日時</th>
 <th>降水強度（mm/h）</th>
 </tr>
 </thead>
 <tbody>
 {feature.Property.WeatherList.Weather
 .map(w =>
 <tr key={w.Date}>
 <td>{Types[w.Type]}</td>
 <td>{w.Date}</td>
 <td align='right'>{w.Rainfall}</td>
 </tr>
 )}
 </tbody>
 </table>
 </>)
 }
 </>
 );
}

export default App;

API を実行する周期を useGetWeatherQuery のオプションで pollingInterval に指定すれば OK です。
このソースコード自身の注意としては、入力中の座標の天気も取得に行っちゃう作りになっている所ですが妥協しました。

実行結果

「降水強度」が 0 のみだと寂しいので、降りそうな新潟駅辺りを指定してみました。

データの取得と表示も定周期で動きました。
定周期のタイミングで、座標変更前のデータ取得も１度発生しますね。
特に使われることが無いので問題にはならなそうです。

Redux Toolkit の RTK Query で REST API を使う

Sat, 10 Jul 2021 20:17:00 +0900

前回は createAsyncThunk を使いましたが、チュートリアルを読み進んでみると、元々データフェッチの機能が用意されていましたので、今回はそちらの方法で REST API を使ってみました。
create-react-app でテンプレートを用意する所は前回と同じなので、その後の修正部分を書いていきます。

REST API を使用するコードを追加

公式の例を参考に createApi、fetchBaseQuery を使って書きます。
データを取得したい側は、useGetCityQuery フックを使うようになります。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export type city = {
 status: string;
 data: {
 id: string,
 name: string,
 }[];
};

export const cityApi = createApi({
 reducerPath: 'cityApi',
 baseQuery: fetchBaseQuery({ baseUrl: 'https://www.land.mlit.go.jp/webland/api/' }),
 endpoints: (builder) => ({
 getCity: builder.query<city, string>({
 query: (code) => `CitySearch?area=${code}`,
 }),
 }),
})

export const { useGetCityQuery } = cityApi

表示部分を次のように追加しました。

import React, { useState } from 'react';
import { useGetCityQuery } from '../../app/services/city';

export function City() {
 const [inputCode, setInputCode] = useState('13');
 const [code, setCode] = useState('');
 const { data, error, isLoading } = useGetCityQuery(code, { skip: code === ''});
 const cities = (code === '')
 ? undefined
 : data?.data;
 return (
 <div>
 <input type="text" value={inputCode} onChange={(e) => setInputCode(e.target.value)} />
 <button onClick={() => setCode(inputCode)}>get</button>
 <button onClick={() => { setCode(''); setInputCode(''); }}>clear</button>
 {
 error
 ? 'Error.'
 : isLoading
 ? 'Loading...'
 : <table>
 <thead>
 <tr>
 <th>ID</th>
 <th>name</th>
 </tr>
 </thead>
 <tbody>
 {
 cities?.map(c => 
 <tr key={c.id}>
 <td>{c.id}</td>
 <td>{c.name}</td>
 </tr>
 )
 }
 </tbody>
 </table>
 }
 </div>
 );
}

useGetCityQuery フックには、[get]クリック時の都道府県コードを渡す必要があるので、

inputCode：入力中の都道府県コード
code：[get]クリック時に inputCode を設定

としています。
code が空のときはクエリを発行したくないので、フックに skip: True を渡して発行を止めています。
データは現状の値が返されるので、cities は undefined にしています。

REST API の実行中は ‘Loading…’ の表示にしてみましたが、REST API が軽くて目視では確認できませんでした。
また、同じクエリは RTK Query がキャッシュから返してくれる為、同じ都道府県コードのときは REST API は発行されません。

そして、store に作成した Reducer を既存の store に加えました。

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import { cityApi } from './services/city';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 [cityApi.reducerPath]: cityApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat(cityApi.middleware),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,
 unknown,
 Action<string>
>;

前回のコードよりもスッキリしましたね。ファイルの構成も次の通りになりました。

createAsyncThunk と RTK Query 、どちらも使い易くできていますね。

React + Redux Toolkit で REST API を使う

Sat, 03 Jul 2021 18:56:53 +0900

React Redux で面倒に感じる部分が、かなり良い感じに改善しているらしい Redux Toolkit 。
非同期の部分も加わっている様なので、REST API を試してみました。

基本はテンプレートを使用

Redux Toolkit のイントロダクションでも説明されている通り、次のコマンドでテンプレートを用意しました。

npx create-react-app my-app --template redux-typescript

REST API は「国土交通省総合情報システム」が公開している「都道府県内市区町村一覧取得API」で試しました。

テンプレートを参考に REST API を使用するコードを追加

テンプレートが良い感じに参考なります。
なので、同じ構成でコードを追加していきました。

まずは counterAPI.ts を参考に次のコードを追加。

export type city = {
 status: string;
 data: {
 id: string,
 name: string,
 }[];
};

export function fetchCity(code: string) {
 return new Promise<city>((resolve, reject) => {
 fetch(`https://www.land.mlit.go.jp/webland/api/CitySearch?area=${code}`)
 .then(response => resolve(response.json()))
 .then(data => reject(data));
 });
}

REST API を呼んで非同期に実行させる部分になります。

次に counterSlice.ts を参考に次のコードを追加。

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import { 
 city,
 fetchCity,
} from './cityAPI';

export interface CityState {
 data?: city;
 status: 'idle' | 'loading' | 'failed';
}

const initialState: CityState = {
 data: undefined,
 status: 'idle',
};

export const cityAsync = createAsyncThunk(
 'city/fetch',
 async (code: string) => {
 try {
 const response = await fetchCity(code);
 return {
 status: 'idle',
 data: response.data,
 };
 }
 catch (e) {
 return {
 status: 'failed',
 data: [],
 };
 }
 },
);

export const citySlice = createSlice({
 name: 'city',
 initialState,
 reducers: {
 clear: (state) => {
 state.data = { status: 'idle', data: [] };
 },
 },
 extraReducers: (builder) => {
 builder
 .addCase(cityAsync.pending, (state) => {
 state.status = 'loading';
 })
 .addCase(cityAsync.fulfilled, (state, action) => {
 state.status = 'idle';
 state.data = action.payload;
 });
 },
});

export const { clear } = citySlice.actions;
export const selectCity = (state: RootState) => state.city.data;
export default citySlice.reducer;

createAsyncThunk 関数で非同期のアクションを生成し、extraReducers で非同期の結果を反映する感じですね。
cityAsync.rejected に対する処理は省略しましたが。

そして表示部分となる Counter.tsx を参考に次のコードを追加。

import React, { useState } from 'react';
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import {
 clear,
 cityAsync,
 selectCity,
} from './citySlice';

export function City() {
 const [code, setCode] = useState('13');
 const cities = useAppSelector(selectCity);
 const dispatch = useAppDispatch();
 return (
 <div>
 <input type="text" value={code} onChange={(e) => setCode(e.target.value)} />
 <button onClick={() => dispatch(cityAsync(code))}>get</button>
 <button onClick={() => dispatch(clear())}>clear</button>
 <table>
 <thead>
 <tr>
 <th>ID</th>
 <th>name</th>
 </tr>
 </thead>
 <tbody>
 {
 cities?.data?.map(c => 
 <tr key={c.id}>
 <td>{c.id}</td>
 <td>{c.name}</td>
 </tr>
 )
 }
 </tbody>
 </table>
 </div>
 );
}

実行時には次のような形になります。

そして、作成した Reducer を既存の store に加えました。

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import cityReducer from '../features/city/citySlice';

export const store = configureStore({
 reducer: {
 counter: counterReducer,
 city: cityReducer,
 },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
 ReturnType,
 RootState,
 unknown,
 Action<string>
>;

これで最終的なファイルの構成は以下の通り。

ホント使い勝手が良くなってますね。比較的小さい規模でも導入しやすいと思いました。