如何从 React 组件 Redux Toolkit 中的 createAsyncThunk 获取结果

Posted 2023-02-22

【中文标题】如何从 React 组件 Redux Toolkit 中的 createAsyncThunk 获取结果

【英文标题】：How to get result from createAsyncThunk in React component Redux Toolkit

【发布时间】：2021-05-01 00:49:59

【问题描述】：

我正在从 Apollo 客户端迁移到 Redux 工具包，我对如何在我的 React 组件中使用 createAsyncThunk 和调用 history.push('/') 和 setSubmitting(false) 的 API 调用的结果（成功或错误）感到困惑。

以Formik 和Apollo Client 为例：

      onSubmit=async (values,  setSubmitting ) => 
    signInMutation(
      variables: 
        email: values.email,
        password: values.password,
      ,
    ).then(
      (response) => 
        if (response.data.signIn.accessToken) 
          localStorage.setItem(
            AUTH_TOKEN,
            response.data.signIn.accessToken,
          );
          if (response.data.signIn.User.isNew) 
            history.push('/welcome-page');
           else 
            history.push('/');
          
          setSubmitting(false);
        
      ,
      (err) => 
        console.log(`error signin $err`);
        enqueueSnackbar(err.message, 
          variant: 'error',
        );
        setSubmitting(false);
      ,
    );

【参考方案1】：

当你调用createAsyncThunk 时，它会返回一个Action Creator redux-thunk 可以使用。

你应该像这样使用函数：

const actionCreator = createAsyncThunk('prefix', async function echo(text) 
  return text;
);

// app.js
import  unwrapResult  from '@reduxjs/toolkit';

function App() 
  const dispatch = useDispatch();

  return (
    <button
      onClick=() => 
        dispatch(actionCreator('233'))
          .then(unwrapResult)
          .then((result) => 
            console.log(result); // => 233
          )
          .catch((error) => 
            console.error(error); // if there is an error
          );
      
    >
      Echo
    </button>
  );

unwrapResult 就是这样做的：

// @reduxjs/toolkit
export function unwrapResult<R extends ActionTypesWithOptionalErrorAction>(
  returned: R
): PayloadForActionTypesExcludingErrorActions<R> 
  if ('error' in returned) 
    throw returned.error
  
  return (returned as any).payload

要处理错误，有两种方法。第一种是直接扔，第二种是返回rejectWithValue。

async function echo(text,  rejectWithValue ) 
  if (Math.random() < 0.5) 
    // throw new Error('error msg');
    // return rejectWithValue('error value');
  
  return text;


dispatch(actionCreator('233'))
  .then(unwrapResult)
  .then((result) => 
    console.log(result); // => 233
  )
  .catch((error) => 
    // by throw new Error('error msg');
    console.log(error.message); // => error msg
    // by return rejectWithValue('error value')
    console.log(error); // => error value
  );

【讨论】：

您好，谢谢。如何从dispatch(actionCreator('233')) 返回拒绝承诺。因为成功的时候我可以处理，但是错误的情况我不能处理。