ngrx / store не показывает обновленные значения формы - PullRequest
Новая
       91

ngrx / store не показывает обновленные значения формы

0 голосов
/ 13 июня 2018

Мне нужно ввести 2 входных значения, которые показывают использование пространства хранения в мегабайтах (used_space и Остальное_пространство) через форму и показать введенные значения из ngrx / Store.Каждый раз при отправке формы отображаются новые значения, а старые обновляются.Проблема состоит в том, что пользовательский интерфейс всегда показывает значения по умолчанию (used_space и Остальное_пространство), и я не знаю, правильна ли моя архитектура, так как я новичок в ngrx / store.

Модель (use.model.ts): 

   export interface Usage {
      used_space: number;
      remaining_space: number;
    }

Действия (use.actions.ts): 

export const EDIT_USAGE  = '[Usage] Edit';
...
export class EditUsage implements Action {
  readonly type = EDIT_USAGE
  constructor(public payload: Usage) {}
}
...
export type All = Reset | EditUsage;

Редуктор (use.reducer.ts): тип экспорта Action = UsageActions.All; 

/// Default app state
const defaultState: Usage = {
  used_space: 2,
  remaining_space: 3
}

/// Helper function to create new state object
const newState = (state, newData) => {
  return Object.assign({}, state, newData)
}

export function usageReducer(state: Usage = defaultState, action: Action) {
  switch(action.type) {
    case UsageActions.EDIT_USAGE:
      // return [...state, action.payload];
      return newState(state, { Usage: action.payload });
    case UsageActions.RESET:
      return defaultState;
    default:
      return state;
  }
}

В app.component.ts: 

  usage: Observable<Usage>

  constructor(private store: Store<AppState>) {
    this.usage = this.store.select('usage')
  }

  editUsage(used_space,remaining_space) {
    this.store.dispatch(new UsageActions.EditUsage({used_space:used_space , remaining_space:remaining_space}) )
  }

В app.component.html: 

<input type="text"  #used_space>
<input type="text"  #remaining_space>
<button (click)="editUsage(used_space.value,remaining_space.value)" >Edit Space</button>

<div *ngIf="usage | async as u">
  <h2>Used space: {{ u.used_space }}</h2>
  <h2>remaining space: {{ u.remaining_space }}</h2>
</div>

Я не вижу никакого результата и не знаю, что не так.

Ответы [ 2 ]

0 голосов
/ 14 июня 2018

Проблема заключается в том, что reducer: 

switch(action.type) {
  case UsageActions.EDIT_USAGE:
    return newState(state, { Usage: action.payload }); <<--------
}

вы переходите в предыдущее состояние и new object with usage as a property.Object.assign делает: создает новый объект, добавляет к нему предыдущее состояние, присоединяет новое свойство Usage и добавляет к нему новые значения store.Вот вид недавно созданного объекта:

Вы можете решить эту проблему, передав payload напрямую: 

switch(action.type) {
  case UsageActions.EDIT_USAGE:
    return newState(state, action.payload);
}

Рабочая демонстрация

Плюс, пока вы обновляете объект целиком в своем редукторе, я полагаю, что вам также не нужно Object.assign().Вы можете напрямую вернуть action.payload, так как это новое состояние.

0 голосов
/ 13 июня 2018

Я думаю, что проблема в селекторе.

this.store.select('usage')

Это будет работать, если в вашем магазине есть объект с именем usage.

Например: 

const defaultState: AppState = {
  usage: {
    used_space: 2,
    remaining_space: 3
  }
}

ИтакВаш код должен быть 

// Default app state
const defaultState: AppState = {
  usage: {
    used_space: 2,
    remaining_space: 3
  }
}

export function usageReducer(state: AppState = defaultState, action: Action) {
  switch(action.type) {
    case UsageActions.EDIT_USAGE:
      return {
        ...state,
        usage: action.payload
      }

    case UsageActions.RESET:
      return defaultState;

    default:
      return state;
  }
}
...