Question

我正在创建一个仪表板，需要从SQL数据库的多个独立部分中提取元素，以便为应用程序创建可用的存储。调用需要按顺序执行，因为它们依赖前一次调用的数据作为后续调用中的参数（示例：最初插入用户名和密码，这允许我们在数据库中找到用户ID，我们可以然后用来定位可供他们查看的目标，然后我们可以用它来获取每个目标的实际数据）

我是Redux的新手（并将这样的异步承诺链接在一起）。我一直在想，实现这一目标的最佳方法是将动作创作者中的不同承诺链接在一起。但是，我得到了一些我无法完全解释的行为。

动作创建者如下：

export function setReduxStore(username, password) {
  return function (dispatch) {
    return dispatch(
      loginUser(username, password)
      ).then((customerId) =>
      setAvailableTargets(customerId)
      )
  }
}

正如您所看到的，动作创建者首先触发了“登录用户”（＆＃39; loginUser（）＆＃39;。此部分正确触发。登录用户的代码可以在下面找到：

export function loginUser(username, password) {
  return function (dispatch) {
    return axios({
      method: 'POST',
      url: 'http://localhost:3050/users/login',
      data: {
        username: username,
        password: password
      }
    }).then((response) => {
      dispatch({type: "LOGIN_USER", payload: response})
      return response.data.data[0].customer_id
    })
  }
}

然而，在＆＃39; setReduxStore（）＆＃39;动作创建者然后让我设置触发第二个查询以帮助设置可用目标。此调用接受从用户登录返回的ID作为参数。此操作的代码如下：

export function setAvailableTargets(customer_id) {
  return function (dispatch) {
  console.log("set targets fired with customer Id " + customer_id)
  return axios({
    method: 'GET',
    url: 'http://localhost:3050/users/targets/' + customer_id,
    data: {
      customer_id: customer_id
    }
  }).then((response) => {
    dispatch({type: 'SET_AVAILABLE_TARGETS', payload: response})
    return response.data.data[0].id
  })
  }
}

你会注意到我在该功能中有一个控制台日志声明 - 当我把它放在上面时

return function (dispatch)

它将使用loginUser提供的相应ID进行触发。但是，在退货功能（发货）＆＃39;之下没有任何内容。正在开火。如果我在promise链之外调用它的方法是有效的，那么在动作创建者中调用它的方式是触发函数但实际上不允许它执行任何有意义的部分代码。

不确定是否重要，但一旦弄明白，我需要更多地建立承诺链 - 并根据setAvailableTargets（）返回的ID获取实际数据。

编辑：对于有类似问题的人，下面的答案帮助我找到了一个如下功能的序列：

  export function setReduxStore(username, password) {
  return function (dispatch, getState) {
    return dispatch(
      loginUser(username, password)
      ).then(() => {
        return dispatch (
        setAvailableTargets(getState().currentUser.customerId)
        )
      })
  }
}

我有一个函数触发，但它没有调度，这阻止了它运行任何有意义的代码。我必须确保在捆绑功能的每个具体阶段都返回一个新的调度。

Answer 1

继续上面的注释，您需要从操作中返回普通对象。由于您正在使用redux thunk中间件，因此可以将函数作为操作返回。

(function (angular) {
    'use strict';
    console.log('hello1')
    angular.module('logExample', []);
    angular.module('logExample')
        .controller('LogController', ['$window', '$scope', '$log', function ($window, $scope, $log) {
            $scope.$log = $log;
            $scope.message = 'Hello World!';
            $log.log('hello2');
            $window.console.log('hello3')
            $scope.alert = function () {
                $window.alert('hi')
            }
        }]);
    angular.bootstrap(document.body, ['logExample']);
})(window.angular);

在redux中使用异步操作的常见模式是定义＆＃39;请求＆＃39;成功＆＃39;＆＃39;失败＆＃39;操作类型，以便您的UI知道是否呈现加载动画，错误消息或响应数据。

请参阅：http://redux.js.org/docs/advanced/AsyncActions.html

回调函数未在Action Creator

1 个答案: