ReactでAPIをコールする効率のいい方法が知りたいです。

Question

現在、ReactでInstagram Graph APIを使用してアプリを構築しています。

■構成
React Hooks + Redux ToolKit + TypeScript + Instagram Graph API

■質問
fetchAsyncGetAccountInfoをdispatchすると、business_discoveryにデータが格納されます。
格納されたデータ(business_discovery['business_discovery']['media']['data'][0]['id'])を引数にfetchAsyncGetMediaInsightをdispatchして、情報を取得したいと考えています。

下記のソースコードのやり方ですと、初期値のidを引数に渡すことになり、fetchAsyncGetAccountInfoで取得したidを取得することができません。

fetchAsyncGetAccountInfoで取得したデータをfetchAsyncGetMediaInsightの引数に渡すやり方はどのようにするのがベストでしょうか？
または別の方法がありますでしょうか？
お力添えよろしくお願い致します。

■ソースコード
Performance.tsx

const Perfomance: React.FC = () => {
    const dispatch = useDispatch()
    const business_discovery = useSelector(selectBusinessDiscovery)
    const media_insights = useSelector(selectMediaInsights)

    useEffect(() => {
        const f = async () => {
            await dispatch(fetchAsyncGetAccountInfo())
            await dispatch(fetchAsyncGetMediaInsight(business_discovery['business_discovery']['media']['data'][0]['id']))
        }
        f()
    }, [dispatch])

    return (
        <div>
			<p>{media_insights['data'][0]['title']}</p>
        </div>
    )
}

export default Perfomance

inistaSlice.tsx

export const fetchAsyncGetAccountInfo = createAsyncThunk('perfomance/getAccountInfo', async () => {
    const {data} = await axios.get(`https://graph.facebook.com/v8.0/xxx?fields=business_discovery.username(xxx){media{id}}&access_token=xxx`)
    return {data: data}
})

export const fetchAsyncGetMediaInsight = createAsyncThunk('perfomance/getMediaInsight', async (media_id: string) => {
    const {data} = await axios.get(`https://graph.facebook.com/v8.0/${media_id}/insights?metric=engagement,impressions,reach,saved&access_token=xxx`)
    return {data: data}
})

const instaSlice = createSlice({
    name: 'perfomance',
    initialState: initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(fetchAsyncGetAccountInfo.fulfilled, (state, action) => {
            return {
                ...state,
                business_discovery: action.payload.data,
            }
        })
        builder.addCase(fetchAsyncGetMediaInsight.fulfilled, (state, action) => {
            return {
                ...state,
                media_insights: action.payload.data
            }
        })
    }
})

Answer 1

useEffectの第二引数に変数を追加することで解決