在redux工具包中呼叫同一個動作后，在slice中合并兩個資料

我現在使用 createAyscThunk 中的引數呼叫資料。

這兩個資料是不同的值，但我想知道如何制作這個。

例如：arr = [...response0，...response1]

可能因為分派了兩次，所以回傳了兩次新資料。我想做這個資料

附上代碼和型別，所以請檢查它

派遣

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

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

動作，切片

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;

打字稿型別

// 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
        }
    }[]
}

我想要一些建議。

uj5u.com熱心網友回復：

你可以做這樣的事情

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;
                });
        },
    });

標籤：反应打字稿jsxredux 工具包

上一篇：在打字稿中將陣列轉換為物件

下一篇：ReactContext狀態被自動洗掉并且無法更新單個欄位