过滤器包含在 on() ngrx reducer 中答案

【问题标题】：filter with includes inside on() ngrx reducer过滤器包含在 on() ngrx reducer 中
【发布时间】：2021-05-14 16:10:24
【问题描述】：

我的操作中有来自输入的文本，它会触发这个减速器。我希望我的状态数组在每个输入上都更新。现在发生的是过滤状态并保持过滤状态，即使输入中没有文本。我可以使数组更加动态，因此它不会永久改变状态并根据输入的内容进行更改吗？就像我以前在订阅 observable 时看到的那样。

Ngrx 减速器：

export const dataReducer = createReducer<Songs[]>(
on(filterTable, (state, action) => {
        return state.filter((item) => item.artist.toLowerCase().includes(action.text.toLowerCase()));
    })
);

行动：

export const filterTable = createAction("[DATABASE] filterTable", props<{ text: string; field: string }>());

【问题讨论】：

标签： angular typescript filter ngrx mutation

【解决方案1】：

让你的状态有一个 allItems 和filteredItems。仅将结果保存到filteredItems。您也可以在选择器中执行此操作，但为简洁起见，我将编辑您现有的代码。

 export const dataReducer = createReducer<Songs[]>(
   on(filterTable, (state, action) => {
      let _state = Object.assign({}, state);
      _state.filteredItems = state.allItems.filter((item) =>       
          item.artist.toLowerCase().includes(
            action.text.toLowerCase()));
       })
      return _state;
  );

【讨论】：