解决动作创建者中的异步功能

Question

我正在尝试在更新状态之前在我的动作创建器中解决这个异步调用。我试图实现 redux thunk，但我对它和整个 angular4+ 都还很陌生。

这是我的动作创作者的样子：

@Injectable() 
export class IndexActions {
  constructor(
    private _cloudReadService: CloudReadService
  ) {}
  static UPDATE_INDEX = 'UPDATE_INDEX';

  updateIndex(): ActionWithPayload {
    return {
      type: IndexActions.UPDATE_INDEX,
      payload: this._cloudReadService.getRecordsByOwner()
        .then(response => {return response})
        .catch(err => console.log)
    }
  }
}

我对 thunk 的主要问题是我的服务方法没有在实际的 thunk 中定义。

服务基本如下所示：

@Injectable()
export class CloudReadService {
  constructor() {
  }

  getRecordsByOwner(): any {
    return firebase.database()
      .ref('lists/records/owners')
      .orderByChild('ownerName')
      .once('value')
      .then(snapshot => {
          /* process response */
          return processedResponse;
      }
    })
  }
}

我想我的问题真的是如何在 redux 中间件中使用服务方法，或者有其他方法吗？

非常感谢任何帮助。

Answer 1

一种方法是分派三个单独的操作。

将 thunk 中间件添加到您的商店将允许您 return 一个带有操作中的调度参数的函数，这样您就可以调度多个操作。

import thunkMiddlware from 'redux-thunk';

const store = createStore(
  // reducer
  rootReducer,
  // preloadedState
  undefined,
  // compose simply enables us to apply several store enhancers
  // Right now, we are only using applyMiddlware, so this is
  // just future-proofing our application
  compose(
    // Middlware can intercept dispatched actions before they reach the reducer
    // in order to modify it in some way
    applyMiddleware(
      // Thunk allows functions to be returned from action creators
      // so we can do things like dispatch multiple actions in a 
      // single action creator for async actions
      thunkMiddlware
    )
  )
);

然后您可以通过仅调用 updateIndex()

来适当地分派请求的每个阶段

updateIndexStart(): Action {
 return {
   type: 'UPDATE_INDEX_START'
 };
}

updateIndexSuccess(response): ActionWithPayload  {
 return {
   type: 'UPDATE_INDEX_SUCCESS',
   payload: response
 };
}

updateIndexError(err): ActionWithPayload  {
 return {
   type: 'UPDATE_INDEX_ERROR',
   payload: err
 };
}

updateIndex() {
  return (dispatch) => {
    dispatch(updateIndexStart());
    cloudReadService.getRecordsByOwner()
      .then(response => dispatch(updateIndexSuccess(response)))
      .catch(err => dispatch(updateIndexError(err)));
  };
}

解决动作创建者中的异步功能

Resolving async function in action creator

angular

asynchronous

redux

thunk