代码之家 › 专栏 › 技术社区 › user1592129

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

ngredux angular-redux redux angular javascript

0

user1592129 · 技术社区 · 6 年前

我对angular和writing服务很陌生,我将使用它添加新地址(发布到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 })
      }
    )
  }

我该怎么做才好?

1 回复 | 直到 6 年前

1

Kim Kern 6 年前

你决不能改变 Store (州)除 reducer . 减速器收到一个动作( ADD_ADDRESS_SUCCESS )有效载荷( {address: {...}} )然后用这些信息更新商店:

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/商店。

对于您应该使用的api调用 Epics :想想 Epic 作为管道,在处理副作用时将一个操作转换为一个或多个其他操作。在你的情况下史诗的反应 ADD_ADDRESS_REQUEST ,使用有效负载进行API调用,然后将操作转换为 添加地址成功 或 ADD_ADDRESS_ERROR ,具体取决于api调用的结果。它永远不会更新状态本身,而是将其委托给reducer处理 添加地址成功 和 添加地址错误 分别是。

在相应的 @angular-redux/store docs .