我无法从 createAsyncThunk 函数中捕获状态和 json 值

Question

usersSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { API } from "../axios/index";

export const signUp = ...

export const logOut = ...

export const signIn = createAsyncThunk("users/signin", async (params) => {
  try {
    const { loginData, history } = params;
    const { data } = await API.post("users/signin", loginData);
    history.push("/");
    return data;
  } catch (error) {
    console.log(error);
  }
});

const initialState = {
  usersInfo: {},
  status: "idle",
  error: null,
  existEmail: false,
};

const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    handleExistEmail: (state, action) => {
      state.existEmail = action.payload;
    },
  },
  extraReducers: {
     ...
    [signIn.fulfilled]: (state, action) => {
      console.log("here is your data : ", action.payload);
      state.status = "succeeded";
      if (action.payload) {
        localStorage.setItem("user", JSON.stringify(action.payload));
      }
    },
  },
});

export default usersSlice.reducer;
export const { handleExistEmail } = usersSlice.actions;

userRouter.js

const isPasswordCorrent = await bcrypt.compare(password, user.password);

if (!isPasswordCorrent) {
  return res
    .status(404)
    .json({ message: "Password dont match" });
}

嗨all.When密码和重新密码不匹配我想后端给我发送状态（404）和json（{消息：“密码不匹配”}）值，我想在 [signIn.fulfilled] 中捕获这些值，但是 action.payload 如果我用 return res.json({ message: "Password dont match" }) 而不是 return.status(404).json({message: "Password dont match"}) 发送给我 undefined.But 这次我无法从 [= 捕获 json({message: "Password dont match"}) 13=]。为什么我必须删除 .status(404) 部分以避免未定义？

Answer 1

这就是 createAsyncThunk 的工作原理。这个包装器本身是一个 try/catch 块，所以在这个动作创建者函数中使用没有意义。如果此创建者函数主体中的承诺被拒绝，那么您的操作 returns 是商店中的 rejected 子操作。所以你必须在减速器中听这个动作。或者如果你真的想使用 try/catch 块，那么在 catch 块中抛出错误。一个小例子用法：

export const exampleAsyncAction = createAsyncThunk(
  ACTION_TYPE,
  async (parameter) => {
    const result = await apicall(parameter);
    return result.doSomeLogic();
  }
);

const reducer = createReducer(
...,

[exampleAsyncAction.pending]: (state) => {
  state.loading = true;
  state.error = null;
},
[exampleAsyncAction.fulfilled]: (state, {payload}) => {
  state.result = payload;
  state.loading = false;
},
[exampleAsyncAction.rejected]: (state, {error}) => {
  state.error = error;
  state.loading = false;
},
)

我无法从 createAsyncThunk 函数中捕获状态和 json 值

i cant catch status and json values from createAsyncThunk function

javascript

node.js

reactjs

react-redux

redux-toolkit