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中定义。

这是服务基本上的样子：

@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中间件添加到商店将允许您从操作中返回带有调度参数的函数，以便您可以分派多个操作。

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)));
  };
}

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

1 个答案: