首页 文章

Redux-thunk异步调用和状态

提问于
浏览 次
0

我想知道我是否在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？

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

reactjs react-native redux redux-thunk

3 回答

  • 0

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

    我找到了处理Ajax的常用模式，就像我在我的问题中提到的那样 . 但是，对ajax调用状态的用户的反馈仅在UI中进行，该UI位于根组件容器中，或者包含执行ajax调用的所有子组件的任何父组件容器 .

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

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

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

    • 发送将启动Ajax调用的操作 .

    • 收到Ajax的结果后，发送一个Action for SUCCESS或FAILURE .

    这些都是这种行为的例子

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

    在Reducers方面，你需要有三个部分的Status来表示一个Ajax请求正在运行（显示一个繁忙的指示符）

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

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

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

    并处理 items 以显示结果，或显示 errors

    回复于
  • 1

    您需要调度包含所需成功结果的操作，该操作将由reducer使用，该reducer根据您的成功结果输出新状态 .

    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
}
    回复于
  • 0

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

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

    回复于

相关问题