如何仅在Redux Toolkit中第一个action成功时才派发第二个action？

要实现仅在signup异步操作成功时才派发login动作，需要从两个方面调整代码：

1. 修改Listener的监听目标 #

Redux Toolkit的createAsyncThunk会自动生成三种状态的action：pending（请求中）、fulfilled（请求成功）、rejected（请求失败）。你之前的代码监听的是signup本身，这会匹配所有三种状态的action，导致无论成败都会触发login。

只需将matcher改为监听signup.fulfilled即可：

// Store.js
listenerMiddleWare.startListening({
    matcher: isAnyOf(signup.fulfilled), // 仅监听signup成功完成的动作
    effect: async (action, listenerAPI) => {
        listenerAPI.cancelActiveListeners();
        // 注意：从action.meta.arg获取原始的email和password，而非action.payload
        listenerAPI.dispatch(login(action.meta.arg))
    }
})

2. 完善Signup Thunk的错误处理 #

你的signup thunk目前没有处理接口请求失败的情况，即使接口返回错误状态码，它依然会返回result.json()，导致signup.fulfilled被触发。需要补充错误处理逻辑，和login thunk保持一致：

// userSlice.js
export const signup = createAsyncThunk(
    'userAuth/signup',
    async (payload, thunkAPI) => {
        const { email, password } = payload
        const result = await fetch(
            signupPath, {
            mode: 'cors',
            credentials: 'include',
            method: "post",
            body: JSON.stringify({ email, password }),
            headers: {
                'Content-Type': 'application/json'
            }
        }
        )
        // 新增：判断接口响应状态，失败时触发rejected动作
        if (!result.ok) {
            return thunkAPI.rejectWithValue({
                status: result.status,
                message: await result.text(),
            });
        }
        return result.json()
    }
)

关键说明 #

• signup.fulfilled的action中，action.payload是接口返回的响应数据，而你需要传给login的是用户原始输入的email和password，这些参数存储在action.meta.arg中（即调用dispatch(signup(xxx))时传入的参数）。
• 补充错误处理后，当signup接口请求失败时，thunk会触发signup.rejected动作，而不是fulfilled，此时listener不会被触发，符合你的需求。

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