多个NGRX缩减器实例的选择器

时间:2017-07-14 17:48:24

标签: angular ngrx ngrx-store

我有一个用于搜索的reducer,并意识到它需要用于多个不相关的搜索组件。因此,通过Redux文档,我发现了更高阶降低器(http://redux.js.org/docs/recipes/reducers/ReusingReducerLogic.html#customizing-behavior-with-higher-order-reducers)(ngrx中的元缩减器)的概念,并使用它来创建我的搜索缩减器的2个“实例”。然后我在相同的文档中发现这似乎与选择器一起使用但实际上存在memoization问题(http://redux.js.org/docs/recipes/ComputingDerivedData.html#accessing-react-props-in-selectors)。那篇文章引用了一个名为'mapStateToProps'的函数,它似乎是将商店数据连接到组件的React特定方式(如果我理解正确的话......)。

在ngrx中是否存在等价物,或者是否存在另一种创建这些选择器以与reducers的不同实例一起使用的方法?

以下是基于我想要完成的ngrx示例应用程序的一个有点人为的例子:

减速器/ searchReducer.ts:

export interface State {
  ids: string[];
  loading: boolean;
  query: string;
};

const initialState: State = {
  ids: [],
  loading: false,
  query: ''
};

export const createSearchReducer = (instanceName: string) => {
  return (state = initialState, action: actions.Actions): State => {
    const {name} = action; // Use this name to differentiate instances when dispatching an action.
    if(name !== instanceName) return state;

    switch (action.type) { 
      //...
    }
  }
}

减速器/ index.ts:

export interface State {
  search: fromSearch.State;
}

const reducers = {
  search: combineReducers({
    books: searchReducer.createReducer('books'),
    magazines: searchReducer.createReducer('magazines')
  }),
}


export const getSearchState = (state: State) => state.search;

// (1)
export const getSearchIds = createSelector(getSearchState, fromSearch.getIds);

我相信上面的getSearchIds选择器需要能够以某种方式指定它正在访问的搜索Reducer的哪个实例。 (奇怪的是,在我的代码中,似乎可以工作,但我不知道它是如何知道选择的,我认为它有Redux文档中讨论的memoization问题。)

2 个答案:

答案 0 :(得分:1)

虽然凯文的回答对我提出的人为代码示例有意义,但如果每个减速器实例都存在维护问题。有很多属性,或者如果你需要很多实例'。在这些情况下,你会在一个减速器上找到许多准重复的属性(例如' bookIds',' magazineIds',' dvdIds',&#39 ; microficheIds'等。)

考虑到这一点,我回到了Redux文档并将其关注到选择器的常见问题解答,特别是How Do I create a Selector That Takes an Argument

根据这些信息,我把它放在一起:

<强>减速器/ index.ts:

export const getBookSearchState = (state: State) => state.search;
export const getMagazineSearchState = (state: State) => state.search;

// A function to allow the developer to choose the instance of search reducer to target in their selector. 
export const chooseSearchInstance = (instance: string): ((state: State) => searchReducer.State) => {
    switch(instance) {
        case 'books': {
            return getBookSearchState;
        }
        case 'magazines': {
            return getMagazineSearchState;
        }
    }
}

// Determines the instance based on the param and returns the selector function.
export const getSearchIds = (instance: string) => {
    const searchState = chooseSearchInstance(instance);
    return createSelector(searchState, state => state.ids);
}

在您知道要使用的缩减器的某个组件中:

//...
class SearchComponent {
    @Input()
    searchType: string = 'books'; 
    ids: Observable<number>;

    constructor(private store: Store<fromRoot.State>) {    
        this.store.select(fromRoot.getSearchIds(searchType));
    }
}

答案 1 :(得分:0)

我建议您重新考虑这样做并使用相同的减速机并制作另一个开关盒。

与此无关,较新版本的AOT不喜欢使用'=&gt;'创造你的减速器。而是使用

export function SearchReducer (state : State = initialState, { type, payload }){
   switch (type) {
      //cases...
   }
}

并且你不必使用combineReducers,你可以构建你的reducer对象

let reducers = {
   search: SearchReducer
}

说你的状态是接口状态类型让你可以利用这种输入。