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

Question

我正在从 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);
      },
    );

Answer 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
  });