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

如何在React js中调用Redux工具箱中的操作

redux-toolkit mern react-router-dom redux reactjs

1

UAhmadSoft · 技术社区 · 4 年前

我有一个基于redux工具包的简单应用程序。我正在调度createProduct actions,它运行良好。我想在createProduct操作之后导航到/products/page form/products/new page。我如何使用navigate(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.

我正在发送这样的产品

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

2 回复 | 直到 4 年前

1

2

Dharmik Patel 4 年前

发送thunk操作的结果是 Promise .Redux toolkit对这个承诺进行了包装,这样组件中就不会出现未捕获的错误。它总是决定行动的成败。但你可以 unwrap() the result 把它和 try/catch .

const dispatch = useDispatch();

const navigation = useNavigation();

const handleSubmit = async (e) => {
  try {
    // wait for the action to complete successfully
    const response = await dispatch(...).unwrap();
    // then navigate
    navigate(...);
  } catch (error) {
    // do something
  }
}

2

1

Drew Reese 4 年前

Reducer函数是纯函数,不能从Reducer发出导航操作,但可以从异步操作或调用组件发出导航操作。React钩子也仅在React函数或自定义钩子中有效。

异步操作返回一个承诺。您可以从已解决的承诺中提取,或者等待它,然后发布命令导航。

const navigate = useNavigate();

使用承诺链:

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