1

我是 Angular 和编写服务的新手，我将使用它来添加新地址（发布到 REST API）。

该saveAddress方法调用返回服务器上新创建的地址对象。

我想将其推送到商店中已经存在的地址数组中。我正在尝试做类似的事情：

saveAddress( payload ) {
    this.httpClient.post( this.endpoint, payload).subscribe(
      response => {
        this.ngRedux.select( s => s.addresses ).subscribe( addresses => {
          let data = addresses.data.push( response )

          this.ngRedux.dispatch({ type: ADD_ADDRESS_SUCCESS, payload: data })
        })
      },

      err => {
        this.ngRedux.dispatch({ type: ADD_ADDRESS_ERROR })
      }
    )
  }

我怎样才能正确地做到这一点？

4

1 回答 1

1

除了Store在reducer. reducer 接收到一个ADD_ADDRESS_SUCCESS带有其有效负载 ( ) 的操作 ( ) {address: {...}}，然后使用该信息更新 Store：

reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_ADDRESS_SUCCESS:
      return Object.assign({}, state, {
        addresses: state.addresses.push(action.payload.address)
      })
    default:
      return state
  }
}

请注意，我们总是复制状态并且不改变它。要真正理解它，请阅读@angular-redux/store 的文档。

对于 API 调用，您应该使用Epics：Epic将一个操作转换为一个或多个其他操作同时处理副作用的管道。在您的情况下，史诗对 做出反应，使用有效负载进行 API 调用，然后根据 API 调用的结果ADD_ADDRESS_REQUEST将操作转换为ADD_ADDRESS_SUCCESS或。ADD_ADDRESS_ERROR它永远不会更新状态本身，而是将其分别委托给reducer处理ADD_ADDRESS_SUCCESS和ADD_ADDRESS_ERROR。

在相应的@angular-redux/store 文档中阅读有关史诗的更多信息。

于 2018-06-18T10:51:08.367 回答