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);

コンポーネントでは、次の2つのセレクターを実行しました

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問題は、更新のみのためにアクションが呼び出されるたびに、 ( for ) と( for )valuesの両方のセレクターが呼び出されることです。(デバッグポイントを入れると、両方に到達します)。getSearchValuesvaluesgetSearchNumbersnumbers//<<DEBUG 1>>//<<DEBUG 2>>

すべてのセレクターではなく、変更されたスライスに関連するセレクターのみを実行することはできますか?

4

1 に答える 1