使用带有 redux 和 redux thunk 操作的反应路由器 V6 导航的最佳方法是什么？

Answer 1

您最好直接在回调中进行导航。 您可以利用 Hooks 规则：Call Hooks from custom Hooks。

// register.js or useRegister.js

export const useRegisterUser = () => {

  const navigate = useNavigate();

  const doRegister = (credentials) => {
    return apiActionCreators.apiCallBegan({
    url,
    method: 'post',
    data: credentials,
    onStart: START_LOADING.type,
    onEnd: END_LOADING.type,
    onSuccessFunc: (data) => (dispatch, store) => {
      dispatch(USER_REGISTERED(data))
      dispatch(CLEAR_MAIN_ERROR())
      // allowed since it's inside a hook
      navigate("menu")
    },
    onErrorFunc: (error) => (dispatch, store) => {
      dispatch(ADD_MAIN_ERROR(error))
    },
  })
}

return {
    doRegister 
}

}

// registerPage.js

import { useRegisterUser } from './register.js'
// other imports 

const RegisterForm = (props) => {

  const { doRegister } = useRegisterUser()

// other stuffs
// grab credentials

    dispatch(doRegister(credentials))

// other stuffs

return (<></>)
}

Answer 2

在搜索和阅读了一些 cmets 之后，我找到了 3 个可能的解决方案， 第一个是第一个答案，但我不太习惯使用它，因为我不知道钩子的实现细节，我试过了，效果很好， 第二个选项是创建您自己的CustomRouter，给它一个您创建的history 对象，并按照此处指定的方式更改您所做的历史对象： https://stackoverflow.com/a/70012117/8690857，感谢 Drew 指出。 第三种是使用可以从 RRDv6 导入的对象，称为 unstable_HistoryRouter，您也可以在这里找到它https://stackoverflow.com/a/70012117/8690857。

Answer 3

对我来说，我试图等待使用createAsyncThunk 创建的函数的结果。我知道使用dispatch，但不确定如何对成功或失败做任何事情。我在 redux 文档here 中找到了我的答案

相关部分：

const handleUpdateUser = async (userData) => {
  const resultAction = await dispatch(updateUser(userData))
  if (updateUser.fulfilled.match(resultAction)) {
    const user = resultAction.payload
    showToast('success', `Updated ${user.name}`)
  } else {
    if (resultAction.payload) {
      // Since we passed in `MyKnownError` to `rejectValue` in `updateUser`, the type information will be available here.
      // Note: this would also be a good place to do any handling that relies on the `rejectedWithValue` payload, such as setting field errors
      showToast('error', `Update failed: ${resultAction.payload.errorMessage}`)
    } else {
      showToast('error', `Update failed: ${resultAction.error.message}`)
    }
  }
}

更具体地说，使用updateUser.fulfilled.match(resultAction)。

我用它在登录后进行导航。这是我的登录提交功能的样子。

  const handleLoginSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const email: string = formData.get('email') as string;
    const password: string = formData.get('password') as string;
    if (!email || !password) {
      return;
    } else {
      const resultAction = await dispatch(loginAsync({ email, password }))
      if (loginAsync.fulfilled.match(resultAction)) {
        navigate('/dashboard');
      } else if (loginAsync.rejected.match(resultAction)) {
        console.log('Failed!');
      }
    }
  }