javascript - 等待带有 React Hooks 的 Redux Action

Question

我正在尝试处理表单提交以在数据获取发生时显示加载组件。我想在数据加载到我的 Redux 时显示数据店铺。

现在，我已将组件设置为使用 React钩子(Hook)。虽然数据加载到我的 redux存储成功，我不确定如何“等待”操作完成的结果。这是我的组件的简化版本:

const DataPage = (props) => {

    const [isLoading, setIsLoading] = useState(false);
    const [isError, setError] = useState(false);

    useEffect(() => { // Reset Filters when dataSource changes...
        setError(false);
        setIsLoading(false);
    }, [dataSource]);

    const handleSubmit = (e, { dataSource }) => {

        e.preventDefault();
        setError(false)
        setIsLoading(true);

         //// IDEALLY THIS IS WHERE THE FIX WOULD GO? TURN THIS INTO ASYNC/AWAIT?
        props.fetchData({ dataSource, token: localStorage.JWT_TOKEN });
    };

    return (    
        <div className="dataPage">
            <form className="dataPage__filters" onSubmit={(e) => handleSubmit(e, { dataSource })}>
                <DataSelector dataSource={dataSource} setDataSource={setDataSource}/>
                <button className="button">
                   Search
                </button>
            </form>
            {isError && <div>Something went wrong...</div>}
            { isLoading ? ( <div>...Loading </div> ) : (
                <div className="dataPage__table">
                    <DataTable /> // This is connected to my redux-store separately through 'connect'
                </div>
            )}
        </div>
    );
};

const mapDispatchToProps = (dispatch) => ({
    fetchData: ({ dataSource, token }) => dispatch(startFetchData({ dataSource, token }))
});

export default connect(null, mapDispatchToProps)(DataPage);

相关操作( startFetchData 和 setData )位于另一个文件中，如下所示:

export const setData = (data) => ({
    type: "SET_DATA",
    data
});

export const startFetchData = ({ dataSource, filter, filterTarget, token }) => {
    return (dispatch) => {

        axios.get(`${'http://localhost:8081'}/api/${dataSource}`, { headers: { authorization: token }})
        .then((res) => {
            dispatch(setData(result));
        });
    }
};

如果可能的话，我希望能够在不引入任何新依赖项的情况下做到这一点。

Answer 1

给使用 TypeScript 的人的注意事项:如果你想await使用 useDispatch() 的操作返回的 promise 您可能会看到 TypeScript 提示不必要的 await .

在这种情况下，请确保将正确的类型(参见 ThunkDispatch)添加到 useDispatch通过泛型。

还有 useEffect()与 async-await syntax确保包裹您的async代码在另一个闭包中，因为 useEffect()预计 void return value 和 Typescript 否则会提示你返回一个 Promise。

const dispatch = useDispatch<ThunkDispatch<any, any, Action>>();

useEffect(() => {
  (async () => {
    const myResult = await dispatch(...);
    const anotherResult = await dispatch(...);
    // ...
  })();
});