使用反应+钩子，我如何调用/使用“navigate()”异步 redux 正确分派后？

Question

当在“dispatch(saveItem(item))”上使用“await”时，它不应该有任何效果，
同时，如果我不使用“等待”，这两个函数将同时运行，从而生成保存的项目，但不会重新渲染组件。

尽管 redux 存储中的状态发生变化，但视图却没有变化， 当使用await时，实际上是等待调度完成，然后运行导航。

我的主要问题是如何在 redux 调度后正确导航？

import { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';
import { useForm } from '../hooks/useForm';
import { getById } from '../services/itemService';
import { saveItem } from '../store/actions/itemActions';

export function ItemEdit() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [item, handleChange, setItem] = useForm(null);
    const itemId = useParams().id;

    useEffect(async () => {
        await loadItem();
    }, []);

    const loadItem = async () => {
        try {
            const item = await getById(itemId)
            setItem(item);
        } catch(err) {
            setErrMsg(err.name + ': ' + err.message);
        }
    };

    const onSaveItem = async (ev) => {
        ev.preventDefault();
        await dispatch(saveItem(item));
        navigate('/item')
    }

    return (
        <form onSubmit={onSaveItem}>
            <button>Save</button>
        </form>
    );
}

Answer 1

你可以这样尝试：

dispatch(saveItem(item))
   .unwrap()
   .then(() => navigate('/item'))
   .catch(error => 'handle error')

它对我有用。