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
の両方のセレクターが呼び出されることです。(デバッグポイントを入れると、両方に到達します)。getSearchValues
values
getSearchNumbers
numbers
//<<DEBUG 1>>
//<<DEBUG 2>>
すべてのセレクターではなく、変更されたスライスに関連するセレクターのみを実行することはできますか?