Redux-thunk异步调用和状态

Question

我想知道我是否正确理解了React或React Native中的Redux-thunk异步操作模式，以及我们如何对操作状态进行用户反馈。

我觉得要么我不明白这个模式，要么这个谜题还有其他部分。

所以，在我的 React 原生应用程序中（但它也可能适用于 React），我想调用一个更新 REST 调用，这将返回一个promise。如果成功或失败，我想向用户显示相应的消息。

没有Redux-async，我只是调用其余的，并处理promise。

callServiceUpdate(data).then(() => displaySuccessMessage())
.catch(() => displayErrorMessage());

在Redux培训中，当我们执行异步操作时，我们只发送一个操作，该操作将调用异步操作。

因此，在我们定义操作的操作文件中：

// in file databaseActions.js

export function updateStatusAction(isSuccess, errorMessage) {
return {
    type: 'UPDATE_STATUS',
    isSuccess,
    errorMessage };
}

export function UpdateAction(data) {
   return (dispatch) => {
     callServiceUpdate(data)
         .then(() => dispatch(updateStatusAction(true)))
         .catch((error) => dispatch(updateStatusAction(false, error)));
}};

并且调度操作将调用服务。

然后我们发送updateStatusAction，它将更新redux状态，并通过props更新回组件。

但是，如何将成功结果反馈给用户呢？是通过道具，和处理组件接收props吗？

这不是太复杂了吗？或者有一种更简单的方法可以为用户提供反馈？

Answer 1

在我对这个主题做了一些研究之后，并搜索了人们如何解决这个问题。

我发现处理Ajax的通常模式，正如我在问题中提到的那样。但是，对ajax调用状态的用户的反馈只发生在UI的一个地方，它位于根组件容器中，或者任何包含所有进行ajax调用的子组件的父组件容器中。

如果您需要阅读有关如何设计UI以适应良好的React UI设计良好实践的更多信息，请阅读有关表示组件和容器组件的信息

React Redux中处理Ajax调用的常见模式如下：

>

发送一个操作，指示查询或Ajax调用已启动。

发送将启动Ajax调用的操作。

收到来自 Ajax 的结果后，发送成功或失败的操作。

这些就是此类行动的例子

{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

在Reducers端，您需要三个部分的have a part of Status来指示Ajax请求正在运行（以显示忙指示器）

商店中的状态看起来与此类似

frontend: {
      isFetching: true,
      didInvalidate: false,
      items: []
    },

然后在根容器中，处理isFetching以呈现一个繁忙指示器。

并处理项目以显示结果或显示错误

Answer 2

您需要分派一个包含您想要的成功结果的动作，该动作将被一个缩减器使用，该缩减器根据您的成功结果输出一个新的状态。

function todoApp(state, action) {
if (typeof state === 'UPDATE_STATUS') {
return { ...state, action.payload } // You can access this by connecting your components to the global redux store.
}
return state
}

Answer 3

仅供参考，您不需要在updateAction中返回call ServiceUpdate（）。至于提供反馈，您可以让您的组件根据设置的道具渲染某些元素，或者如您所提到的覆盖组件WillReceiveProps/组件DidReceiveProps。

您还可以在< code > shouldcomponentdupdate 中指定组件应该更新的场景，以避免不需要的重新呈现。我不会说这是一个过于复杂的方法。