2 
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(for values) 和getSearchNumbers(for numbers) 都被调用。（如果您放入一个调试点//<<DEBUG 1>>，//<<DEBUG 2>>两者都将达到）。

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

4

1 回答 1

2

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

当一个动作被分派时，作为输入的getSearchNumbers变化ADD_VALUE，该选择器和getSearchValues.

于 2017-03-06T20:48:42.147 回答