typescript - 为什么我们不在 NgRx 中直接到达状态？

问题描述

目前我正在学习 NgRx。到目前为止，我学到了这个：

为了改变状态，我们调度所谓的动作
动作是一个带有标识符的对象，并且可以选择带有有效负载
此操作不会直接到达商店，而是到达所谓的减速器
reducer 只是一个函数：它从 store 中获取当前状态，并将 action 作为输入
在 reducer 中，我们可以查看动作标识符并相应地对状态执行更改（我们将其作为参数）以不可变的方式更新该状态（更改副本）
reducer 返回一个新状态，它返回一个旧状态的副本，并将这个状态转发到应用商店
然后这个简化的状态会覆盖旧的状态

我真的不能理解，为什么我们不直接改变存储在 store 中的状态？为什么我们需要这个 reducer 并对 store 中的 state 副本进行更改并将其写回？

对于我的另一个问题，这里有一些代码：

import { Ingredient } from '../../shared/ingredient.model';
import * as ShoppingListActions from './shopping-list.actions';

const initialState = {
  ingredients: [new Ingredient('Apples', 5), new Ingredient('Tomatoes', 10)]
};

export function shoppingListReducer(
  state = initialState,
  action: ShoppingListActions.AddIngredient
) {
  switch (action.type) {
    case ShoppingListActions.ADD_INGREDIENT:
      return {
        ...state,
        ingredients: [...state.ingredients, action.payload]
      };
    default:
      return state;
  }
}

这是一个简单的减速器。在这里，我们通过返回旧状态并覆盖ingredients.

有没有要遵循的模式，我们必须如何返回新状态，或者它取决于商店中的状态？

标签： typescriptngrxngrx-store

对于您的第一个问题，为什么我们不直接更改您商店的状态。答案是不变性

我认为整个 [action > reducer > store > selector] 流程的关键点是不变性。它确保没有任何不良副作用，并且您的行为是可预测和可重复的。

这通常会提高性能并且通常更简单的编程和调试。

随着您的应用程序扩展，NGRX 架构将允许您拥有一致且可靠的状态管理。

关于要遵循的模式，我们必须如何返回新状态。

您只需要返回商店的新状态。这有助于更改以确保始终返回“新”值。考虑到减速器的状态是一个对象，我认为“新”状态有助于刷新商店的价值，并允许您的应用程序知道减速器中是否发生了变化。

如前所述，您的状态的直接突变不会导致此刷新。

typescript - 为什么我们不在 NgRx 中直接到达状态？

问题描述

解决方案

推荐阅读