使用Redux-Toolkit的ASyncThunk返回值

ubof19bj 于 2023-10-19 发布在其他

关注(0)|答案(1)|浏览(107)

我有一个React应用程序，其中有一个创建客户端的页面，从那里我将数据发送到Redux-Toolkit的createAsynkThank，它将处理请求并将其发送到服务器，并将其保存在DB中（如果请求成功，它将保存在商店中）。
我希望在保存由于某种原因失败的情况下，例如：这样的客户端已经存在，或者无效的电子邮件，发送回React错误并在屏幕上显示。有可能吗？

export const newClient = createAsyncThunk('clients/newClient', 
  async ({ name, email, tel }, { getState, dispatch, rejectWithValue }) => {
    if (name && email && tel) {
      $.post(`${URL}/clients/newClient`, { name, email, tel })
      .then( res => {
        dispatch(slice.actions.NewClient({ name, email, tel, _id: res.data.data._id }))
        // return value success
      })
      .catch( err => { 
        // return value err
      })
    } else {
      // return value
    }
  }
)

const setNewClient = () => {
  dispatch(newClient({ name, email, tel }))
    .then(res => console.log(res))
    .catch(err => console.log(err))
}

redux

来源：https://stackoverflow.com/questions/76975599/returning-a-value-with-redux-toolkits-createasyncthunk

1条答案

按热度按时间

xytpbqjk1#

是的，您可以返回rejectWithValue并返回错误。
范例：

export const newClient = createAsyncThunk(
  'clients/newClient', 
  async ({ name, email, tel }, { getState, dispatch, rejectWithValue }) => {
    try {
      if (name && email && tel) {
        const res = await $.post(
          `${URL}/clients/newClient`,
          { name, email, tel }
        );
        dispatch(slice.actions.NewClient({
          name,
          email,
          tel,
          _id: res.data.data._id
        }));
        // return value success;
      } else {
        // return value
      }
    } catch(error) { 
      return rejectWithValue(error); // <-- return rejection w/error here
    }
  }
);

然后UI应该打开已解析的Promise。

const setNewClient = async () => {
  try {
    const res = await dispatch(newClient({ name, email, tel })).unwrap();
    console.log(res);
  } catch(error) {
    console.log(error);
  }
}

或

const setNewClient = () => {
  dispatch(newClient({ name, email, tel })).unwrap()
    .then(res => console.log(res))
    .catch(err => console.log(err));
};

有关更多详细信息，请参阅：

处理Thunk结果
处理Thunk错误

赞(0）回复(0）举报 2023-10-19

我来回答

使用Redux-Toolkit的ASyncThunk返回值

1条答案

相关问题

热门标签

最新问答