Angular 两次调度操作将从存储中删除不同的状态 我有一个商店，其状态为用户状态和交易状态，以及 我有一个名为this.store.dispatch（newactions.Query（））的操作

当我导航到页面时，我在

ngOnInit（）

中调度

Query（）

操作，该操作调用一个从我的数据库检索事务并将它们添加到存储的效果

这在第一次加载页面时效果很好，但是离开此页面并再次返回会从我的存储中删除

用户

状态

我已确定此函数调用是罪魁祸首，因为删除它可确保用户状态保留在存储中

我如何解决这个问题，或者，有人能解释一下调试这个问题的好方法吗？我很难看到任何可以覆盖我商店整个状态的地方

这是我的电话

ngOnInit（）：void{
this.transactions=this.store.select（fromTransaction.selectAll）；
this.store.dispatch（new actions.Query（））；
}

这是我的特效

@Effect（）
查询$：可观察=此.actions$.pipe(
//在调用查询操作时侦听
类型（transactionActions.QUERY），
//执行该操作并返回数据库引用和更改快照
开关映射（操作=>{
返回此.firestore.collection（'transactions'，ref=>{
返回ref；
})
.snapshotChanges（）；
}),
合并映射（操作=>操作），
映射（操作=>{
返回{
类型：`[TRANSACTION]${action.type}`，
有效载荷：{
…action.payload.doc.data（），
id:action.payload.doc.id
}
};
})
);

这是我的事务缩减器：

导出函数TransactionReducer(
状态：状态=初始状态，
动作：动作。交易动作
) {
开关（动作类型）{
案例行动.新增：
返回transactionAdapter.addOne（action.payload，state）；
案例行动.修改：
返回transactionAdapter.updateOne({
id:action.payload.id，
更改：action.payload
}，国家）；
已删除的案例操作：
console.log（action.payload）；
返回transactionAdapter.removeOne（action.payload.id，state）；
违约：
返回状态；
}
}

以下是状态界面：

export interface AppState {
    transaction: Transaction[];
    user: User | null;
}

这是用户界面

export function userReducer(state: User = defaultUser, action: Action) {
  switch (action.type) {

    case userActions.GET_USER:
      return { ...state, loading: true };

    case userActions.AUTHENTICATED:
      return { ...state, ...action.payload, loading: false };

    case userActions.NOT_AUTHENTICATED:
        return { ...state, ...defaultUser, loading: false};

    case userActions.GOOGLE_LOGIN:
        return { ...state, loading: true};

    case userActions.AUTH_ERROR:
        return { ...state, ...action.payload, loading: false};

    case userActions.LOGOUT:
        return { ...state, loading: true};
  }
}

这是我在

app.module.ts

  StoreModule.forRoot({
      transaction: TransactionReducer,
      user: userReducer
    }),

---

在交换机中添加默认值。请记住，reducer必须返回一个新状态，并且它始终接收所有操作。如果reducer没有返回任何内容，因为该操作不匹配任何

案例

，这就像它将

未定义

作为新状态返回一样

因此：

导出函数userReducer（状态：User=defaultUser，操作：操作）{
开关（动作类型）{
case userActions.GET_用户：
返回{…状态，加载：true}；
案例userActions.AUTHENTICATED：
返回{…state，…action.payload，loading:false}；
case userActions.NOT_认证：
返回{…state，…defaultUser，加载：false}；
case userActions.GOOGLE_登录：
返回{…状态，加载：true}；
case userActions.AUTH_错误：
返回{…state，…action.payload，loading:false}；
case userActions.LOGOUT：
返回{…状态，加载：true}；
}
返回{…状态}；
}

---

顺便说一句，请小心排列操作员。它只返回状态的浅拷贝。如果您在状态中存储了复杂对象，那么您将打破一条黄金法则：不变性。我建议您在需要时使用来构建新状态。

您是否也可以显示

状态

界面？您是否还可以添加

用户的缩减器和操作

？看起来它们之间有交叉点。我添加了用户减速器，并且按照请求添加了状态界面。您的减速器应该在

开关中有一个
默认值：
，返回一个新状态（类似
默认值：return{…State}
，否则您将删除所有内容。如果您喜欢immer，请查看