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

问题描述

我需要输入2个输入值，这些输入值通过表单显示兆字节(used_space和剩余空间)的存储空间使用情况，并显示ngrx/Store中输入的值.每次提交表单时，都会显示新值并更新旧值.问题在于，UI始终显示默认值(used_space和remaining_space)，并且由于我是ngrx/store的新手，所以我不知道自己的体系结构是否正确.

I need to enter 2 input values that shows the Usage of a storage space in megabytes (used_space and remaining_space) via a form and show the entered values from ngrx/Store. Each time the form is submitted the new values are showed and the old ones are updated. The problem is that the UI shows always the default values of (used_space and remaining_space) and I do not know if my architecture is right since I am new in ngrx/store.

模型(usage.model.ts):

Model (usage.model.ts):

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

动作(usage.actions.ts):

Actions (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;

Reducer (usage.reducer.ts): export type 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中:

In 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中:

In 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>

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

I am not seeing any result and I do not know what is wrong.

推荐答案

问题出在您的 reducer :

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

您正在传递以前的状态和一个 新对象，并将其用作属性 . Object.assign 的作用是:创建一个新对象，向其附加先前的状态，附加一个全新的属性 Usage 并向该对象添加新的store值.这是新创建的对象的视图:

you are passing previous state and a new object with usage as a property. What Object.assign does is: create a new object, append previous state to it, attach a brand new property Usage and add new values of store to that. Here's view of newly created object:

您可以通过直接传递 payload 来解决此问题:

You can solve this passing the payload directly:

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

工作演示

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

Plus, as long as you are updating object as whole in your reducer, I believe you don't need Object.assign() too. You can directly return the action.payload as it is the new state.

这篇关于ngrx/store不显示表单的更新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！