Angular ngrx/存储未显示表单的更新值

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

模型（用法.Model.ts）：

操作（用法.Actions.ts）：

减速器（用法.Reducer.ts）： 导出类型操作=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}) )
  }

用法：可观察
构造函数（私有存储：存储）{
this.usage=this.store.select（'usage'））
}
editUsage（已使用的\u空间，剩余的\u空间）{
this.store.dispatch（newusageActions.EditUsage（{used_space:used_space，resisting_space:resisting_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>

编辑空间
已用空间：{u.Used_space}
剩余空间：{u.剩余空间}

---

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

我认为问题在于选择器

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

---

问题出在您的

减速器上

：

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

---

另外，只要您在reducer中整体更新对象，我相信您也不需要

object.assign（）

。您可以直接返回新状态下的

action.payload

。

是否在

app.module.ts

中注册了减速器？是的，它已注册感谢回复，但我已在减速器中定义了默认值输入的表单值在app.component.ts中收到，但显示的值始终是默认值默认值..请问这里有什么帮助吗？对不起，我在回复中出错了。我想解释一下，你的代码中有一个不连贯的地方。defaultState应为AppState类型。然后在对象内部使用。这是编辑操作中的情况，返回是可以的。但是defaultState不是。所以我创建了“add.state.ts”文件：“interface AppState{usage:usage；}”，然后我将AppState导入到reducer中。在那之后，应用你建议的代码更改，对吗？我尝试了上面提到的内容，但仍然不起作用。。您是否知道显示类似要求的示例：只更新一个包含2个值的对象，而不需要收集对象？或者，我甚至可以使用2个类型为“number”的变量（已使用的\u空间和剩余的\u空间），而不将它们包装在对象中，并通过ngrx/store进行更新？非常感谢您的建议，它的效果非常好：）您的解决方案仍然存在一个问题：表单中输入的数据在路由器更改后消失。你知道这背后的原因吗？你能试试吗？我看到了链接，我会试试。但是我认为直接从UI组件访问服务是不安全的，在这两者之间应该有一种控制器（例如component.ts文件），这样服务就不会公开。不管怎样，我会试试的。

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

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

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