Question

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

我感觉要么我不理解这种模式，要么还有其他一些难题。

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

如果没有Redux-async，我只需调用其余部分，并处理承诺。

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更新组件。

但是如何将成功结果反馈给用户呢？是通过道具，还是处理componentWillReceiveProps？

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

Answer 1

仅供参考，您不需要在callServiceUpdate()中退回updateAction。至于提供反馈，您可以让您的组件渲染某些元素，具体取决于已设置的道具或您提到的覆盖componentWillReceiveProps / componentDidReceiveProps。

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

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

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

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

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

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

发送一个操作，指示查询或Ajax调用已启动。
发送将启动Ajax调用的操作。
收到Ajax的结果后，要么发送一个Action for SUCCESS，要么发送失败。

这些是此类行动的例子

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

商店中的州看起来与此类似

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

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

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

Redux-thunk异步调用和状态

3 个答案: