Обновление / Загрузка новых данных в состояние 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

Вы никогда не должны изменять 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
  }
} 

Обратите внимание, что мы всегда делаем копию состояния и не изменяем его. Чтобы действительно понять это, пожалуйста, прочитайте документацию для @angular-redux/store.

Для вызовов API вы должны использовать Epics: Думать о Epic как конвейер, который преобразует действие в одно или несколько других действий при обработке побочного эффекта. В вашем случае эпопея реагирует на ADD_ADDRESS_REQUEST, делает вызов API с полезной нагрузкой, а затем преобразует действие в ADD_ADDRESS_SUCCESS или же ADD_ADDRESS_ERRORв зависимости от результата вызова API. Он никогда не обновит само состояние, а передаст его обработке редуктора. ADD_ADDRESS_SUCCESS а также ADD_ADDRESS_ERROR соответственно.

Узнайте больше об эпосах в соответствующих документах @ angular-redux / store.