Redux-thunk 异步调用和状态

Question

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

我感觉不是我没看懂这个模式，就是还有其他的拼图。

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

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

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

Answer 1

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

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 2

仅供参考，您不需要 return callServiceUpdate() updateAction。就提供反馈而言，您可以让您的组件根据设置的道具呈现某些元素，或者如您所提到的覆盖 componentWillReceiveProps/componentDidReceiveProps.

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

Answer 3

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

我发现处理 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 以显示结果，或显示 errors

Redux-thunk 异步调用和状态

Redux-thunk async calls and status

reactjs

react-native

redux

redux-thunk