如何在 React js 中调用 Redux Toolkit 操作中的导航

Question

我有一个基于 redux-toolkit 构建的简单应用程序。我正在调度 createProduct 操作，该操作运行良好。我想在 createProduct 操作后导航到 /products/ 页面表单 /products/new 页面。我如何使用导航（react-router-dom）来做到这一点。

我尝试了这个内部动作但失败了

 [createProduct.fulfilled]: (state, { payload }) => {
      toast.success('Product Created Successfully!');
      const navigate = useNavigate()
      navigate('/products')
      return {
        ...state,
        loading: false,
        products: state.products ? [...state.products, payload.product] : [payload.product]
      };
    },

我也尝试将导航传递给有效负载，但遇到了此错误：

 You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

我正在像这样调度 createProduct

 const handleSubmit = async () => {
    console.log('formik.values', formik.values);
    dispatch(
      createProduct({
        ...formik.values,
        category: formik.values.category._id,
        subCategory: formik.values.subCategory._id
      })
    )
  };

Answer 1

减速器函数是纯函数，您不能从减速器发出导航操作，但可以从异步操作或调用组件中发出导航操作。React hooks 也仅在 React 函数或自定义 hooks 中有效。

异步操作返回一个 Promise。您可以从已解决的 Promise 开始链接，或者等待它，然后发出命令式导航。

const navigate = useNavigate();

使用 Promise 链：

const handleSubmit = () => {
  dispatch(createProduct({
    ...formik.values,
    category: formik.values.category._id,
    subCategory: formik.values.subCategory._id
  }))
    .then(() => {
      navigate('/products');
    });
};

或者async/await：

const handleSubmit = async () => {
  try {
    await dispatch(createProduct({
      ...formik.values,
      category: formik.values.category._id,
      subCategory: formik.values.subCategory._id
    }));
    navigate('/products');
  } catch(error) {
    // handle any rejections/errors
  }
};