更新/将新数据推送到 NgRedux 状态

Question

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

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

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

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 for @angular-redux/store.

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

在相应的 @angular-redux/store docs 阅读更多关于 epics 的信息。

更新/将新数据推送到 NgRedux 状态

Updating/ Pushing new data into NgRedux state

javascript

redux

angular

angular-redux

ngredux