Javascript 等待重新执行操作（带反应挂钩）

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

Redux

存储时显示数据

现在，我已经将组件设置为使用

React

挂钩。当数据成功加载到我的

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

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

我建议您使用中间件。让您的操作成为函数（包括异步函数），而不是对象，这是一个非常简单和有用的库。我给你举个例子：

Store.js

从'redux'导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk；
从“./reducers/index”导入rootReducer；
从“./services/api”导入api；
//注意：此API要求redux@>=3.1.0
const store=createStore(
减根剂，
//在本例中，使用额外参数（my API）：
applyMiddleware（thunk.withExtraArgument（api））；
);

AuthDuck.js 给出这个duck（同一个文件中的类型、操作和缩减器，请参阅更多）

//----------------------------------------------------------------
//类型
// ----------------------------------------------------------------
常量类型={
SIGN_IN_START:“SIGN_IN_START”，
签到成功：“签到成功”，
登录失败：“登录失败”
};
// ----------------------------------------------------------------
//行动
// ----------------------------------------------------------------
常量符号=函数（用户）{
//看这里！
//Redux Thunk使您能够返回函数而不是对象。
返回异步函数（dispatch、getState、api）{
试一试{
分派（{type:Types.SIGN_IN_START}）；
const token=wait api.access.signin（用户）；
分派（{type:Types.SIGN_IN_SUCCESS，payload:token}）；
}捕获（错误）{
分派（{type:Types.SIGN\u IN\u FAIL，payload:error}）；
}
};
};
导出常量操作={signin}；
// ----------------------------------------------------------------
//还原剂
// ----------------------------------------------------------------
导出默认函数缩减器（状态、操作）{
开关（动作类型）{
案例VEANCYCALENDARTYPES.SIGN_IN_START:
返回{…状态，isLoading:true}；
案例VEANCYCALENDARTYPES.SIGN_IN_成功：
返回{…状态，isLoading:false，token:action.payload}；
案例VEASACALENDARTYPES.SIGN_IN_失败：
返回{…状态，isLoading:false，错误：action.payload}；
违约：
返回状态；
}
};

我希望能帮助您，让我知道它是否对您的案例有效：）

---

最好的问候

使用TypeScript的人的注意事项：如果您想等待

使用
useDispatch（）
操作返回的承诺，您可能会看到TypeScript抱怨不必要的
等待

在这种情况下，请确保通过泛型向
useDispatch
添加正确的键入（请参阅）

同样使用
useffect（）
with时，请确保将
async
代码包装在另一个闭包中，因为
useffect（）
需要
void
返回值，否则Typescript会抱怨您返回了承诺

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

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

const dispatch=usedpatch（）；
useffect（（）=>{
（异步（）=>{
const myResult=等待调度（…）；
const anotherResult=等待调度（…）；
// ...
})();
});
< /代码>从ReDux调度动作中修改/更新一个状态值可能被认为是一种反作用的工作模式ReDux，你应该考虑把加载>代码>到页面的减速器中，然后简单地从那里发送动作，<代码>加载< /代码>现在将是一个抱歉，我不理解这个评论。即使我将isLoading作为道具传递给我的DataTable，这也不能解决我的问题。我仍在尝试等待fetchData redux操作。
const dispatch = useDispatch<ThunkDispatch<any, any, Action>>();

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