Home>

I'm currently building an app in React using the Instagram Graph API.

■ Composition
React Hooks + Redux ToolKit + TypeScript + Instagram Graph API

■ Question
When you dispatch fetchAsyncGetAccountInfo, the data is stored in business_discovery.
I want to dispatch fetchAsyncGetMediaInsight with the stored data (business_discovery ['business_discovery'] ['media'] ['data'] [0] ['id']) as an argument to get the information.

If i use the source code method below, you will pass the id of the initial value as an argument, and you will not be able to get the id obtained by fetchAsyncGetAccountInfo.

What is the best way to pass the data fetched by fetchAsyncGetAccountInfo to the argument of fetchAsyncGetMediaInsight?
Or is there another way?
Thanks for your support.

■ Source code
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 (
        
          <p>{media_insights ['data'] [0] ['title']}</p>
        
    )
}
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
            }
        })
    }
})