代码之家 › 专栏 › 技术社区 › nrofis

Redux thunk调用者获取响应

redux-thunk redux reactjs

nrofis · 技术社区 · 4 年前

我的操作(使用Redux工具箱编写):

export const createTodoAction = createAsyncThunk(
  "todos/CREATE",
  async (todo: Todo) => {
    const fullTodo = await createTodoApi(todo);
    return fullTodo; // Contains the ID from the server
  }
);

function CreateTodoForm() {
   const dispatch = useDispatch();

   const onFormSubmit = (form: Todo) => {
      dispatch(createTodoAction(form));

      // How can I get the ID here?
   }

   ...
}

我的直观解决方案是直接从组件调用API并转换 createTodoAction 到一个常规的Redux操作(不是thunk)。但是我的所有其他操作都是用Redux thunk编写的,所以一个操作必须直接从组件调用API似乎有点奇怪。

是否有任何方法可以从调用者组件中的thunk操作获得响应?

1 回复 | 直到 4 年前

nrofis 4 年前

createAsyncThunk 返回作为结果的最终已调度操作 dispatch(thunk()) unwrap the result action to get the payload value :

function CreateTodoForm() {
   const dispatch = useDispatch();

   const onFormSubmit = async (form: Todo) => {
      const resultAction = await dispatch(createTodoAction(form));
      try {
        const payload = unwrapResult(resultAction);
        // do something with payload here
      } catch (err) {
        // call must have failed - can optionally handle error here
      }
   }

   ...
}

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

2 年前

zishe · React Redux同步操作返回一些代理对象而不是字符串

6 年前

DÅ¾enis H. · 仅在刷新页面后呈现道具

6 年前

lex · reactjs减速机相关术语说明[已关闭]

6 年前

kosmicbird · 如何将异步thunk操作延迟到存储了身份验证会话令牌之后?

6 年前

John · 404使用react-routerv4从react redux应用程序中的状态呈现组件时出错?

6 年前

Juan · 与Redux thunk异步/等待。获取错误:操作必须是普通对象。对异步操作使用自定义中间件

6 年前

jsDev · 调用两个异步操作的正确方法

6 年前

samtoya · Redux异步操作getState()返回未定义?

6 年前

Adrian Florescu · Typescript Redux Thunk(类型)

6 年前