Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/sorting/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Redux 同步重复操作_Redux_React Redux_Redux Thunk - Fatal编程技术网

Redux 同步重复操作

Redux 同步重复操作,redux,react-redux,redux-thunk,Redux,React Redux,Redux Thunk,我试图在Redux中进行同步调度调用,其中第一个调用更新isLoading状态,以便我们可以在UI上显示加载图标,然后第二个调用在后台执行大量同步计算以更新项目位置-大约需要2-5秒 第一个操作发生并且状态正确更改,但在该操作发生后,它似乎不会立即命中react前端组件,而是转到第二个分派。当我在第一次调度后添加一个短的超时时,它就可以工作了,但我讨厌硬编码固定的等待时间 这个问题有更好的解决方案吗 不工作: const showLoadingIcon = () => ({type: ty

我试图在Redux中进行同步调度调用,其中第一个调用更新
isLoading
状态,以便我们可以在UI上显示加载图标,然后第二个调用在后台执行大量同步计算以更新项目位置-大约需要2-5秒

第一个操作发生并且状态正确更改,但在该操作发生后,它似乎不会立即命中react前端组件,而是转到第二个分派。当我在第一次调度后添加一个短的
超时时,它就可以工作了,但我讨厌硬编码固定的等待时间

这个问题有更好的解决方案吗

不工作:

const showLoadingIcon = () => ({type: types.SHOW_LOADING_ICON});
export const updateInteractionTypeScores = (updatedValues) => dispatch => {
    dispatch(showLoadingIcon());
    dispatch({type: types.UPDATE_VALUES, updatedValues});
};
工作:

const showLoadingIcon = () => ({type: types.SHOW_LOADING_ICON});
export const updateInteractionTypeScores = (updatedValues) => dispatch => {
    dispatch(showLoadingIcon());
    setTimeout(() => dispatch({type: types.UPDATE_VALUES, updatedValues}), 100);
};

您所谓的同步操作实际上是一个异步操作,在特定时间更新存储。对于这样的事情,一般的模式是(至少)对动作的每个状态有三个分派

  • 启动异步操作
  • 异步操作成功
  • 异步操作失败
  • 启动异步操作将发送一个“ASYNC_action_LAUNCHED”操作,该操作将更新组件正确连接到的存储(对吗?),因此将显示加载图标

    成功后,将调度“ASYNC_ACTION_success”,更新存储,并使用新的存储内容重新加载组件

    失败时,将调度“ASYNC_ACTION_failure”,更新存储,并使用空内容和错误消息重新启动组件

    实际上,这相当于编写更多的代码,但这允许更多的可能性:

    const asyncActionLaunched = () => ({type: types.ASYNC_ACTION_STARTED});
    const asyncActionSuccess = () => ({type: types.ASYNC_ACTION_SUCCESS});
    const asyncActionFailed = () => ({type: types.ASYNC_ACTION_FAILED});
    
    export const updateInteractionTypes = dispatch => {
        dispatch(asyncActionLaunched());
    
        // I don't know your setup
        // But this whould either be a Promise, or return a boolean
    
        // in the case of a synchronous function
        const result = makeSynchronousCalculations();
        if (result) {
            dispatch(asyncActionSuccess());
            // dispatch another action that updates store
        } else {
            dispatch(asyncActionFailed());
            // dispatch another action that updates store
        }
        // in the case of a promise
        asyncBlockingAction()
            .then(
                dispatch(asyncActionSuccess());
                // dispatch another action that updates store
            ).catch(
                dispatch(asyncActionFailed());
                // dispatch another action that updates store
            );
    };
    

    啊,这完全有道理,应该可以很好地工作…谢谢!