Redux-thunk异步调用和状态

我在想如果我在React或React-Native中正确理解Redux-thunk异步操作的模式，以及我们如何才能对用户操作状态做出反馈。Redux-thunk异步调用和状态

我感觉要么我不了解模式，要么还有其他难题。

因此，在我的React本机应用程序（但它也可能是一个React），我想调用更新REST调用，它将返回一个承诺。而且在成功或失败的情况下，我希望相应地向用户显示消息。

如果没有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状态，并通过道具更新组件。

但是如何将成功的结果带回给用户呢？它是通过道具，并处理componentWillReceiveProps？

是不是太过复杂？还是有更简单的方式给用户提供反馈？

来源

2017-05-23 Ghassan Karwchan

在我做了一些关于这个主题的研究之后，并且寻找了人们如何解决这个问题。

我发现了处理Ajax的通常模式，正如我在我的问题中提到的。但是，用户对ajax调用状态的反馈仅在位于根组件容器中的UI或包含执行ajax调用的所有子组件的任何父组件容器中发生。

如果您需要了解更多关于如何设计用户界面，以适应良好阵营UI设计好做法，那么在处理Ajax调用在阅读representational components and container components

了以往的模式阵营+终极版如下：

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

这些例子在减速侧这样的动作

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

的，你需要的三个部分的状态都指示一个Ajax请求的一部分正在运行（显示忙指标）

在商店将国家类似于这样

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

东西10

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

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

来源

2017-05-24 03:02:28

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

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 
}

来源

2017-05-23 19:13:55 Alisamix

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

仅供参考，你并不需要在updateAction返回callServiceUpdate()。就提供反馈而言，您可以让组件渲染某些元素，具体取决于设置了什么道具或者您已经提到覆盖componentWillReceiveProps/componentDidReceiveProps。

您还可以指定组件应在shouldComponentUpdate中更新的方案，以避免不必要的重新呈现。我不会说这是一个过于复杂的方法。

来源

2017-05-24 00:32:54 sooper

回报只是我的一个实验，看看我能否得到承诺（只是玩耍），而不是代码中的最终目的。我将删除它。而你说得对，看来这是至少在使用React，Redux的大中型应用程序中的常见模式。我读到你只需要处理根容器中的用户反馈（错误，成功，繁忙指示符）。这使它变得如此简单。我会在另一个答案中添加您的答案，并随时编辑更多。非常感谢 –

Redux-thunk异步调用和状态

回答

相关问题