redux with angular2 does not return results

Question

I am using redux with angular2 and trying to call windows azure search. I wrote this code: 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;
  }
}

search service:

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));
  }

and the component:

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

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

html:

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

everything is to be okay and I can see the result in the Redux extension in the Chrome, which they are right. but I always get true as a result of my HTML. the redux is right. the service is right but I cannot find the problem.

any tip could be helpful. thank you P.S. the JSON Object names are right.

score 2 · Answer 1 · answered May 30 '17 at 16:57

2

Azure Search is working on a redux library to query and build UI against the service. Have you tried using it? It is well tested and avoids common pitfalls: https://github.com/EvanBoyle/AzSearchStore

answered May 30 '17 at 16:57

Evan Boyle

41
2

score 0 · Accepted Answer · answered May 30 '17 at 14:46

0

I found the solution after 4 hours struggling: the problem was with small letter, capital letter thing.

in component:

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

's'earchState$ instead of 'S'earchState$

answered May 30 '17 at 14:46

Samy Sammour

2,298
2
31
66

redux with angular2 does not return results

2 Answers2