使用 react + hooks，我如何在异步 redux 正确调度后调用/使用“navigate()”？

Question

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

尽管 redux 存储中的 state 更改了视图，但使用 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')

这个对我有用。