Question

所以我已多次阅读this帖子，但现在定义的设置和示例与store example app中显示的方法不同。

我已经根据示例应用程序编写了我的商店代码，因此如果我们继续在此帖子中使用示例应用程序进行参考：

Book Reducer：

export interface State {
  ids: string[];
  entities: { [id: string]: Book };
  selectedBookId: string | null;
};

const initialState: State = {
  ids: [],
  entities: {},
  selectedBookId: null,
};

export function reducer(state = initialState, action: book.Actions | collection.Actions): State {
  switch (action.type) {
    case book.ActionTypes.SEARCH_COMPLETE:
    case collection.ActionTypes.LOAD_SUCCESS: {
      const books = action.payload;
      const newBooks = books.filter(book => !state.entities[book.id]);

      const newBookIds = newBooks.map(book => book.id);
      const newBookEntities = newBooks.reduce((entities: { [id: string]: Book }, book: Book) => {
        return Object.assign(entities, {
          [book.id]: book
        });
      }, {});

      return {
        ids: [ ...state.ids, ...newBookIds ],
        entities: Object.assign({}, state.entities, newBookEntities),
        selectedBookId: state.selectedBookId
      };
    }

export const getEntities = (state: State) => state.entities;
export const getIds = (state: State) => state.ids;

Reducers index.ts（缩短但保留相关信息）：

import { createSelector } from 'reselect';
import { compose } from '@ngrx/core/compose';
import { storeFreeze } from 'ngrx-store-freeze';
import { combineReducers } from '@ngrx/store';
import * as fromBooks from './books';


export interface State {
  books: fromBooks.State;
}

const reducers = {
  books: fromBooks.reducer,
};

const productionReducer: ActionReducer<State> = combineReducers(reducers);
export function reducer(state: any, action: any) {
    return productionReducer(state, action);

}

export const getBooksState = (state: State) => state.books;
export const getBookEntities = createSelector(getBooksState, fromBooks.getEntities);
export const getBookIds = createSelector(getBooksState, fromBooks.getIds);

现在我无法理解的是＆＃34;查询＆＃34;＆＃34;建成后，我想要做的就是通过身份证说＆＃34; 456＆＃34;从ID为＃34; 456＆＃34;的书中查看状态的函数。将此数据返回到Book的可观察对象中，以便我可以在我的模板/组件中使用它。

我已经看了几个小时的示例代码，当我认为我已经掌握了它时，我无法弄清楚我做错了什么。如果有人能够解释如何构建一个带有自定义参数的选择器。

我使用了示例应用中的确切代码，希望如果找到答案，那将对未来的读者有所帮助。

Answer 1

当您使用redux模式时，您必须通过Actions执行所有操作。

首先您需要在商店中存储选定的ID，在这种情况下，“selectedBookId”属性为新的Action，如SELECTED_BOOK

第二次要获取所选书籍，您需要创建一个选择器，将选定的BookId与您的实体数组组合在一起，如：

export const getSelected = createSelector(
  getEntities,
  getSelectedId,
  (entities , selectedId) => entities.find(entities => entities.id === selectedId)
);

index.ts

export const getSelectedBook = createSelector(getBookState, fromBook.getSelected);

最后获取您需要调用选择器的图书对象

this.book$ = this.store.select(fromRoot.getSelectedBook);

从ngrx / store中提取特定数据

1 个答案: