Redux Toolkit的createAsyncThunk如何灵活传入ChannelId参数？

完全可以通过给createAsyncThunk传递参数的方式实现灵活修改ChannelId，这是最直接的解决方案，具体操作如下：

1. 修改createAsyncThunk接收参数 #

将原thunk函数的第一个参数改为接收包含ChannelId的对象（或直接接收ChannelId字符串），并在请求URL中使用该参数替换固定的channelId：

// 修改后的ACTION
export const getYoutubeList_PlayList = createAsyncThunk(
    "GET/YOUTUBE_PLAYLIST",
    async ({ channelId }, thunkAPI) => { // 接收传入的channelId参数
        try {
            const { data } = await axios.get<youtubeResponse>(
                `https://www.googleapis.com/youtube/v3/playlists?key=${youTubeAcsses.apiKey}&channelId=${channelId}&part=snippet&maxResults=30`
            )
            return data
        } catch (err: any) {
            return thunkAPI.rejectWithValue({
                errorMessage: '호출에 실패했습니다.'
            })
        }
    }
);

如果只需要传递单个ChannelId值，也可以简化为直接接收字符串参数：

async (channelId, thunkAPI) => {
    // 请求URL中直接使用channelId参数
    const { data } = await axios.get<youtubeResponse>(
        `https://www.googleapis.com/youtube/v3/playlists?key=${youTubeAcsses.apiKey}&channelId=${channelId}&part=snippet&maxResults=30`
    )
    // ...后续逻辑不变
}

2. 调用thunk时传入ChannelId #

在组件或其他逻辑中调用该thunk时，传入目标ChannelId即可：

// 示例：在组件中dispatch（对象参数版）
dispatch(getYoutubeList_PlayList({ channelId: 'UCxxxxxxxxx' }))

// 示例：字符串参数版
dispatch(getYoutubeList_PlayList('UCxxxxxxxxx'))

其他可选方案 #

如果ChannelId已经存储在Redux全局状态中，也可以通过thunkAPI.getState()直接获取，无需手动传入参数：

async (_, thunkAPI) => {
    const state = thunkAPI.getState()
    const channelId = state.youtube_Playlist.channelId // 根据你的状态结构调整路径
    // 后续请求逻辑不变
}

不过这种方式灵活性不如直接传参数，更适合ChannelId在全局状态中固定存在的场景。

内容的提问来源于stack exchange，提问作者EthanKyle