在ngrx中有不可变状态的问题

Question

我是ngrx的新手。试图让不可变的状态工作，但似乎对我不起作用。

我这里有一个reducer：https://stackblitz.com/edit/brewbrut?file=src%2Fapp%2Fstate%2Fbreweries.reducer.ts

breweryDetails应该返回一个新的数组(状态)，以及过滤后的结果。如果我单击一家酿酒厂，然后返回，或者单击导航回酿酒厂列表的链接，状态仍然被过滤。

下面是stackblitz：https://brewbrut.stackblitz.io/

下面是reducer：

import { createReducer, on } from "@ngrx/store";
import { IBrewery } from "../definitions/brewery.definition";
import {
  retrievedBreweries,
  listAllBreweries,
  breweryDetails
} from "./breweries.actions";

export const initialState: ReadonlyArray<IBrewery> = [];
export const breweriesReducer = createReducer(
  initialState,
  on(retrievedBreweries, (state, { breweries }) => [...state, ...breweries]),
  on(listAllBreweries, state => state),
  on(breweryDetails, (state, { breweryId }) =>
    state.filter(brewery => brewery.id === breweryId)
  )
);

我做错了什么？

Answer 1

我调查过你的代码，

实际上，你的代码工作得很好，没有任何变化，

当你选择一些啤酒厂时，你只需清除所有的啤酒厂

在这种情况下，您应该在store中为选定的Brewery创建单独的属性

因此，我更改了您的AppState，我为包括breweries和selected在内的所有brews内容创建了一个属性。现在看起来是这样的：

import { ActionReducerMap } from "@ngrx/store";
import { IBrewery } from "../definitions/brewery.definition";
import { breweriesReducer } from "./breweries.reducer";

export interface AppState {
  brews: Brews;
}
export interface Brews {
  breweries: ReadonlyArray<IBrewery>;
  selected: IBrewery;
}

export const reducers: ActionReducerMap<AppState> = {
  brews: breweriesReducer
};

还在app.module中更改了主减速器

@NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent],
  imports: [
    BrowserModule,
    BrowserTransferStateModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule,
    BrowserAnimationsModule,
    StoreModule.forRoot(reducers)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

另外，我对你的减速器做了一点改动：

import { createReducer, on } from "@ngrx/store";
import { IBrewery } from "../definitions/brewery.definition";
import { retrievedBreweries, breweryDetails } from "./breweries.actions";

export const initialState = {
  breweries: [],
  selected: null
};
export const breweriesReducer = createReducer(
  initialState,
  on(retrievedBreweries, (state, { breweries }) => ({
    ...state,
    breweries
  })),
  on(breweryDetails, (state, { breweryId }) => ({
    ...state,
    selected: [...state.breweries].filter(brewery => brewery.id === breweryId)
  }))
);

而不是你的选择器，我在BreweriesComponent和BreweryComponent中使用了一个简单的箭头函数(更简单)：

  ngOnInit(): void {
    this.breweries$ = this.store
      .select(s => s.brews.breweries)
      .pipe(takeUntil(this.destroy$));
  }

你可以在这里找到完整的(编辑过的)项目：

https://stackblitz.com/edit/brewbrut-envssk?file=src/app/state/breweries.reducer.ts