Question

我正在使用带有angular2的redux并试图调用windows azure搜索。我写了这段代码： types.ts

export interface IAppState {
  languageState?: LanguageState;
  searchState?: SearchState;
}
export type SearchState = si.Immutable<{
  searchResult: SearchResult;
  isLoading: boolean;
}>;

rootReducer：

export const rootReducer = combineReducers({
  searchState: searchReducer
});

search.reducer：

const INITIAL_SEARCH_STATE: SearchState = si.from({
  searchResult: new SearchResult(0, [], []),
  isLoading: false
});

export function searchReducer( state: SearchState = INITIAL_SEARCH_STATE, action: Action): SearchState {
  switch (action.type) {
    case SearchActions.SEARCH_RESULT_LOADING:  {
      return state.set('isLoading', true);
    };
    case SearchActions.SEARCH_RESULT_LOADED:  {
      return state.set('isLoading', false).set('searchResult', action['payload']);
    };
    default:
      return state;
  }
}

search.actions：

@Injectable()
export class SearchActions {
  static SEARCH_RESULT_LOADING = 'SEARCH_RESULT_LOADING';
  static SEARCH_RESULT_LOADED = 'SEARCH_RESULT_LOADED';

  constructor(private ngRedux: NgRedux<IAppState>, private searchService: SearchService) { }

  search(searchItem: SearchItem) {
    const searchOptions = new SearchAzureOptions(searchItem);
    this.ngRedux.dispatch({
      type: SearchActions.SEARCH_RESULT_LOADING,
    });

    this.searchService.searchEntries(searchOptions.getSearchOptions()).subscribe(result => {
      this.ngRedux.dispatch({
        type: SearchActions.SEARCH_RESULT_LOADED,
        payload: result
      });
    });
  }
}

searchResult class：

export class SearchResult {
  count: number;
  products: Product[];
  Facets: Facet[];

  constructor(count: number, products: Product[], facets: Facet[]) {
    this.count = count;
    this.products = products;
    this.Facets = facets;
  }
}

搜索服务：

searchEntries(searchOptions: any): Observable<SearchResult> {
    return this.http
      .post('link',
      searchOptions, new RequestOptions({ headers: this.headers }))
      .map(res => res.json())
      .map(row => new SearchResult(row['count'] as number, row['value'] as Product[], null))
      .retry(5)
      .catch((error: any) => this.searchHandleError(error));
  }

和组件：

@select()
  SearchState$: Observable<SearchState>;

  constructor(private actions: SearchActions) {
this.actions.search(searchItem);
}

html：

{{ (SearchState$ | async) == null }}

一切都没问题，我可以在Chrome中看到Redux扩展程序中的结果，他们是对的。但由于我的HTML，我总是这样。 redux是对的。服务是对的，但我找不到问题。

任何提示都可能有所帮助。谢谢附： JSON对象名称是正确的。

Answer 1

Azure Search正在使用redux库来查询和构建针对该服务的UI。你尝试过使用它吗？它经过了充分测试，避免了常见的陷阱：https://github.com/EvanBoyle/AzSearchStore

Answer 2

经过4个小时的努力，我找到了解决方案：问题是小写字母，大写字母的事情。

组件中的

：

@select()
  searchState$: Observable<SearchState>;

＆＃39; earchState $而不是＆＃39; earchState $

带有angular2的redux不会返回结果

2 个答案: