ngrx/store 未显示表单的更新值

Question

我需要通过表单输入 2 个输入值，以兆字节（used_space 和剩余空间）为单位显示存储空间的使用情况，并显示来自 ngrx/Store 的输入值。每次提交表单时，都会显示新值并更新旧值。问题是 UI 总是显示（used_space 和 remaining_space）的默认值，我不知道我的架构是否正确，因为我是 ngrx/store 的新手。

模型（usage.model.ts）：

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

动作（usage.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;

减速器（usage.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>

我没有看到任何结果，也不知道出了什么问题。

Answer 1

问题出在你的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);
}

Working Demo

另外，只要您在 reducer 中更新整个对象，我相信您也不需要 Object.assign()。您可以直接返回action.payload，因为它是新状态。

Answer 2

我认为问题出在选择器上。

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;
  }
}