Redux-thunk 异步调用和状态

Posted 2023-02-21

【中文标题】Redux-thunk 异步调用和状态

【英文标题】：Redux-thunk async calls and status

【发布时间】：2017-10-23 11:08:52

【问题描述】：

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

我觉得要么我不理解这个模式，要么还有其他谜题。

因此，在我的 React-native 应用程序中（但它也可能适用于 React），我想调用一个更新 REST 调用，这将返回一个承诺。 在成功或失败的情况下，我想向用户显示一条消息。

没有 Redux-async，我只需调用其余部分，并处理 promise。

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

在 Redux 训练中，当我们做 async 时，我们只是 dispatch 一个 action，这个 action 会调用 async 操作。

所以，在我们定义动作的动作文件中：

// 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，处理componentWillReceiveProps吗？

是不是太复杂了？ 或者有更简单的方式为用户提供反馈？

【参考方案1】：

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

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

如果您需要阅读更多关于如何设计 UI 以适应良好的 React UI 设计良好实践的信息，请阅读 representational components and container components

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

发送指示​​查询或 Ajax 调用已启动的操作。

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

收到来自 Ajax 的结果后，发送一个动作表示成功或失败。

这些是此类行为的示例

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

在 Reducers 方面，您需要三个部分 有一部分状态来指示 Ajax 请求正在运行（以显示忙碌指示符）

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

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

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

并处理 items 以显示结果，或显示 错误

【参考方案2】：

仅供参考，您无需在updateAction 中返回callServiceUpdate()。至于提供反馈，您可以让您的组件根据设置的道具渲染某些元素，或者正如您提到的那样覆盖componentWillReceiveProps/componentDidReceiveProps。

您还可以在 shouldComponentUpdate 中指定组件应更新的场景，以避免不希望的重新渲染。我不会说这是一种过于复杂的方法。

【讨论】：

返回只是我的一个实验，看看我是否能得到一个承诺（只是玩弄一下），并不打算在代码中完成。我会删除它。你是对的，这似乎是至少在使用 React、Redux 的中型到大型应用程序中的常见模式。而且我读到您只需要在根容器中处理对用户的反馈（错误、成功、忙碌指示符）。这让它变得如此简单。我将在另一个答案中添加您的答案，并随时进行编辑。非常感谢

【参考方案3】：

您需要调度一个包含您想要的成功结果的操作，该操作将被减速器消耗，该减速器根据您的成功结果输出一个新状态。

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

【讨论】：

我知道该怎么做。我的问题是：显示反馈不是很复杂吗？