@effects examples? about ngrx-query

[isaacplmann]

I'm glad you like it. What kinds of examples are you looking for?

[oleosjo]

I guess my question is how would I trigger api requests without using the connect service directly in components. My routes/views don't correspond directly to api requests so I want to decouple api requests from components, and just user store.select to retrieve the slices of state I need.

[isaacplmann]

You can create services that act as intermediaries between components and ngrx-query. In my app, I have a service for each type of entity (i.e. userService, orderService, etc). Those services are then in charge of triggering network requests and returning store.select observables.

ngrx-query stores everything it does in queries and entities on the store. queries describes each network request (url, pending, success, retry status, etc) and entities is the actual results of those network requests.

You can also use @ngrx/effects to listen for any of the actions that ngrx-query dispatches. These actions are used to start a process that redux-query itself finishes.

export const REQUEST_ASYNC = '[ngrx-query] REQUEST_ASYNC';
export const MUTATE_ASYNC = '[ngrx-query] MUTATE_ASYNC';
export const CANCEL_QUERY = '[ngrx-query] CANCEL_QUERY';

redux-query dispatches actions as it is processing a request and you can listen for those as well.

var REQUEST_ASYNC = exports.REQUEST_ASYNC = '@@query/REQUEST_ASYNC';
var REQUEST_START = exports.REQUEST_START = '@@query/REQUEST_START';
var REQUEST_SUCCESS = exports.REQUEST_SUCCESS = '@@query/REQUEST_SUCCESS';
var REQUEST_FAILURE = exports.REQUEST_FAILURE = '@@query/REQUEST_FAILURE';

var CANCEL_QUERY = exports.CANCEL_QUERY = '@@query/CANCEL_QUERY';

var MUTATE_ASYNC = exports.MUTATE_ASYNC = '@@query/MUTATE_ASYNC';
var MUTATE_START = exports.MUTATE_START = '@@query/MUTATE_START';
var MUTATE_SUCCESS = exports.MUTATE_SUCCESS = '@@query/MUTATE_SUCCESS';
var MUTATE_FAILURE = exports.MUTATE_FAILURE = '@@query/MUTATE_FAILURE';

var RESET = exports.RESET = '@@query/RESET';
var REMOVE_ENTITIES = exports.REMOVE_ENTITIES = '@@query/REMOVE_ENTITIES';
var REMOVE_ENTITY = exports.REMOVE_ENTITY = '@@query/REMOVE_ENTITY';

I agree that there are some big holes in the documentation. Let me know what else would be helpful to explain.

[oleosjo]

Thanks! Yeah that gets me on the right track. I'm still having a little trouble connecting the pieces, though. I have services set up as well for each entity type, how would I actually inform ngrx-query to make the api request? I see in the demo app, the query creator functions, but how do I actually dispatch those, without the connector magic.

Is it something along these lines? Or am I missing it?
store.dispatch({type: REQUEST_ASYNC}, queryPayload)

[isaacplmann]

There are actually 3 different ways to trigger a request (in order of magic-ness):

Use store directly

store.dispatch({ type: ngrx_query.REQUEST_ASYNC, ...requestParams });

This is exactly what connectService.requestAsync does for you.

ConnectService

connectService.requestAsync(requestParams);

nqConnect directive

<yourComponent [nqConnect]="requestParams"></yourComponent>

Automatically subscribes/unsubscribes when the component is rendered/destroyed. See this article for more details.

[oleosjo]

Ahh okay. Thank you, very helpful. I think 'requestAsync' was the missing piece in my mind that I was confused about. I see that in the service now.

Very interesting data directives paradigm. That makes more sense of the demo app too. Thanks.

[oleosjo]

I have one more question. Is there an easy way I can switch the http service being used? I have an auth-http service that inherits angular's http service, so should be a drop in replacement.

[isaacplmann]

You could leverage Angular's dependency injection and replace the http service with your own version. I do that in my own app to attach jwt bearer tokens.

Sample code

@Injectable()
class BearerAuthInterceptorNg2 extends Http {

  constructor(protected backend: ConnectionBackend, protected defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }
  // ...
}

export function bearerAuthFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {
  return new BearerAuthInterceptorNg2(xhrBackend, requestOptions);
}

export const HTTP_BEARER_AUTH_PROVIDER = {
  deps: [XHRBackend, RequestOptions, RouterHolder],
  provide: Http,
  useFactory: bearerAuthFactory,
};

@NgModule({
  providers: [HTTP_BEARER_AUTH_PROVIDER],
})
export class AppModule {}

I do think it would be good to provide a way for people to directly swap out their own http client - especially now that Angular 4.3 has HttpClient as an improved Http service.

[oleosjo]

Sweet, thanks.

[oleosjo]

Hey man, do you know how I would create a reducer in my app that could modify entities with my own actions?

[isaacplmann]

Entities should be used as basically a cache of the server state - if you want a modified version of them, you should use selectors to get the altered version.

Enhancing entities with more info:

• I fetch a list of folders from the server, which are stored in state.entities.folders
• However, I want to display those folders in a tree component that needs an icon property (which doesn't exist on the server side folders)
• So I create a state.icons branch that has items like this { folderId: 3, icon: 'blueFolder' }
• Then I create a treeFolders selector that combines state.entities.folders and state.icons to give each folder the specified icon or a default 'folder' icon.

Editing entities:

If you want to store your form data in redux, you should make a copy of the entity and store the copy in a state.forms branch. That way if the user cancels their changes instead of submitting them, you can easily fall back to the unedited data.

Does that explanation help?

[oleosjo]

Yes, thank you! Up till now I've been using selectors as you suggest and it's great. However, I have one use case where I would like to actually modify the entities store branch without making an async request. I have a list of search results, e.g. state.entities.geocodeSearchResults. However, I want to be able to clear the search results based on a few UI interactions such clicking away from the results, or an empty query, but I don't want to make a request for that. Is there any way I can dispatch an action to set the state.entities.geocodeSearchResults state?

P.S. great library, and thanks for always being so helpful.

[isaacplmann]

There are a couple ways you could do that.

1. Using selectors like my explanation above
2. Overwriting the entitiesReducer

Selectors:

• Create a state.searchResults branch with a showSearchResults boolean
• Use a searchResults selector that combines state.entities.geocodeSearchResults and state.searchResults.showSearchResults to return the results or an empty array

Modified reducer (meta reducer):

• Create a modifiedEntitiesReducer that listens for whatever custom actions you want
• In that reducer, return entitiesReducer(newState, action) for the default of the switch statement
• Use modifiedEntitiesReducer where you were using entitiesReducer

[oleosjo]

Ahh okay. Yes the selectors way makes sense now. It took me a minute to get my head around it. Thank you.