javascript - 更新/推送新数据到 NgRedux 状态

Question

我是 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 })
      }
    )
  }

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

Answer 1

除了 reducer 之外，您绝不能在任何其他地方更改 Store(状态)。 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
  }
} 

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

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

在相应的 @angular-redux/store docs 中了解有关史诗的更多信息.