Ngrx 所有重新选择选择器在单个状态切片更改时运行

Question

import { GlobalState } from './app.reducer';
import * as App from './app.actions';

import { AppState } from './appstate';
import { createSelector } from 'reselect';

//Global Reducer State
export interface GlobalState {
  search: SearchState;
}

//This is based on GlobalState
export const reducers = {
  search: reducer
}


//Sub Search State
export interface SearchState {
    values: string[];
    numbers: number[];
}

export const initialSearchState : SearchState = {
    values:[],
    numbers:[]
}


export function reducer(state = initialSearchState, action: App.Actions): SearchState {
  switch (action.type) {
    case App.ActionTypes.ADD_VALUE: {
      return {
        values: [...state.values, action.payload],
        numbers: state.numbers
      };
    }
    case App.ActionTypes.ADD_NUMBER: {
      return {
        values: state.values,
        numbers: [...state.numbers, action.payload]
      };
    }
  }

  return state;
}


export const getValues = (state: SearchState) => {
  //<<DEBUG 1>>
  return state.values;
}
export const getNumbers = (state: SearchState) => {
  //<<DEBUG 2>>
  return state.numbers;
}


export const getGlobalState = (state: GlobalState) => state.search;
export const getSearchValues = createSelector(getGlobalState, getValues);
export const getSearchNumbers = createSelector(getGlobalState, getNumbers);

在组件中我有运行以下两个选择器

constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public store: Store<GlobalState>) {
    this.values = this.store.select(getSearchValues);
    this.numbers = this.store.select(getSearchNumbers);
  }

问题是每次调用 App.ActionTypes.ADD_VALUE 操作时仅更新 values 然后选择器 getSearchValues（对于 values）和 getSearchNumbers（ for numbers) 被调用。（如果你在 //<<DEBUG 1>> 和 //<<DEBUG 2>> 中放置一个调试点，两者都会达到）。

是否可以只让与更改的切片相关的选择器为运行而不是所有选择器，好像有 40 个选择器，每次有变化时每个选择器都会运行到单个部分。

Answer 1

getSearchValues 和 getSearchNumbers 选择器共享相同的输入 - state.search - 这是用于确定是否可以使用 reselect 的记忆选择的选择器输入。

由于 getSearchNumbers 的输入在分派 ADD_VALUE 操作时发生变化，因此调用该选择器以及 getSearchValues。

Ngrx 所有重新选择选择器在单个状态切片更改时运行

Ngrx all reselect selectors being run on single state slice change

javascript

angular

redux

ngrx

reselect

Ngrx 所有重新选择选择器在单个状态切片更改时 运行

Ngrx all reselect selectors being run on single state slice change

javascript

angular

redux

ngrx

reselect

Ngrx 所有重新选择选择器在单个状态切片更改时运行