I am now calling data using parameters in createAyscThunk.

The two data are different values, but I want to know how to make this one.

ex : arr = [...response0, ...response1]

Maybe because dispatched twice, return the new data twice. I want to make this one data

attached the code and type, so please check it

dispatch

const dispatch = useAppDispatch();
    const { data, loading, error } = useAppSelector((state) => state.youtube_PlaylistSlice);

    useEffect(() => {
        if (!data) {
            dispatch(youtubeList_Playlist('UCvpIHsNLXfpOj_uMgI62I2A'));
            dispatch(youtubeList_Playlist('UCBXwSHfXqRIJkaPs3ZMzKVA'));
        }
    }, [])

action, slice

interface PostState {
    loading: boolean;
    error: string | null;
    data: youtubeResponse | null;
    cartegory : {}[]
}

const initialState = {
    loading: false,
    error: null,
    data: null,
    cartegory : []
} as PostState;

// ACTION
export const youtubeList_Playlist = createAsyncThunk(
    "GET/YOUTUBE_CHANNELID",
    async (arg : string, thunkAPI) => {
        try {
            const { data } = await axios.get<youtubeResponse>(
                `https://www.googleapis.com/youtube/v3/playlists?key=${youTubeAcsses.apiKey}&channelId=${arg}&part=snippet&maxResults=30`
            )
            return data
        } catch (err: any) {
            return thunkAPI.rejectWithValue({
                errorMessage: '호출에 실패했습니다.'
            })
        }
    }
);

// SLICE
const youtube_PlaylistSlice = createSlice({
    name: "YOUTUBE_PLAYLIST",
    initialState,
    reducers: {},
    extraReducers(builder) {
        builder
            .addCase(youtubeList_Playlist.pending, (state, action) => {
                state.loading = true;
            })
            .addCase(youtubeList_Playlist.fulfilled, (state, action: PayloadAction<youtubeResponse>) => {
                state.loading = false;
                state.data = action.payload;
            })
            .addCase(youtubeList_Playlist.rejected, (state, action: PayloadAction<any>) => {
                state.error = action.payload;
            });
    },
});


export default youtube_PlaylistSlice.reducer;

typescript type

// Youtube
export type youtubeResponse = {
    kind: string
    etag: string
    items: {
        kind: string
        etag: string
        id: string
        snippet: {
            publishedAt: string
            channelId: string
            title: string
            description: string
            thumbnails: {
                default: {
                    url: string
                    width: number
                    height: number
                }
                medium: {
                    url: string,
                    width: number,
                    height: number
                }
                high: {
                    url: string,
                    width: number,
                    height: number
                }
                standard: {
                    url: string,
                    width: number,
                    height: number
                }
                maxres: {
                    url: string,
                    width: number,
                    height: number
                }
            }
            channelTitle: string,
            playlistId: string,
            position: 0
            resourceId: {
                kind: string,
                videoId: string
            }
            videoOwnerChannelTitle: string
            videoOwnerChannelId: string
        }
    }[]
}

I'd like some advice.

CodePudding user response：

You can do something like this

const youtube_PlaylistSlice = createSlice({
        name: "YOUTUBE_PLAYLIST",
        initialState,
        reducers: {},
        extraReducers(builder) {
            builder
                .addCase(youtubeList_Playlist.pending, (state, action) => {
                    state.loading = true;
                })
                .addCase(youtubeList_Playlist.fulfilled, (state, action: PayloadAction<youtubeResponse>) => {
                    state.loading = false;
                    state.data = [...state.data, ...action.payload];
                })
                .addCase(youtubeList_Playlist.rejected, (state, action: PayloadAction<any>) => {
                    state.error = action.payload;
                });
        },
    });