带有 angular2 的 redux 没有 return 结果

Question

我正在使用 redux 和 angular2 并尝试调用 windows azure search。我写了这段代码： 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
      });
    });
  }
}

搜索结果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 是正确的。服务不错，但我找不到问题。

任何提示都可能有所帮助。谢谢你 P.S。 JSON 对象名称是正确的。

Answer 1

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

在组件中：

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

's'earchState$ 而不是 'S'earchState$

Answer 2

Azure 搜索正在开发一个 redux 库来查询和构建 UI 服务。你试过使用它吗？它经过了很好的测试并避免了常见的陷阱：https://github.com/EvanBoyle/AzSearchStore

带有 angular2 的 redux 没有 return 结果

redux with angular2 does not return results

angular-http

azure-cognitive-search

redux

angular