question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Alternative way of typing actions for dataPersistence when using NGRX 8

See original GitHub issue

Expected Behavior

I can type action parameters on a less verbose way using ngrx 8 action creators creators.

Current Behavior

In order to be able to type my actions, so I can use their payload on the run/onError methods, I need to do ReturnType<typeof createCategoryDefinition> where createCategoryDefinition is

import { createAction, props } from '@ngrx/store';

export const createCategoryDefinition = createAction(
  '[Category Definitions/API] create category definition',
  props<{ creationData: CategoryDefinitionCreationData }>()
);
@Effect()
  createCategoryDefinitionEffect$ = this.dataPersistence.fetch<ReturnType<typeof createCategoryDefinition>>(
    createCategoryDefinition.type,
    {
      run: action => {
        return this.categoryDefinitionService
          .createCategoryDefinition(action.creationData)
          .pipe(
            map(categoryDefinition => createCategoryDefinitionSuccess({ categoryDefinition}))
          );
      },

      onError: (action, error) => {
        return createCategoryDefinitionFailure({ error });
      },
    }
  );

Is there maybe some other way to leverage typescript to ease the typing of said actions?

Context

Latest version of NX. Version 8.x of NGRX.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
ramariveracommented, Aug 11, 2019

I tested the new schematics, but I have to either add the ReturnType<typeof actionCreator> to the generic argument for dataPersistence.fetch or add it to the id, run and onError callbacks.

@Injectable()
export class ProductsEffects {
  loadProducts$ = createEffect(() =>
    this.dataPersistence.fetch(ProductsActions.loadProducts, {
      run: (
        action: ReturnType<typeof ProductsActions.loadProducts>,
        state: ProductsPartialState
      ) => {
        // Your custom service 'load' logic goes here. For now just return a success action...
        return ProductsActions.loadProductsSuccess({ products: [] });
      },

      onError: (action: ReturnType<typeof ProductsActions.loadProducts>, error) => {
        console.error('Error', error);
        return ProductsActions.loadProductsFailure({ error });
      },
    })
  );
```

Isn't there a way `fetch` can pull the action type form the ActionCreator parameter?
1reaction
yinonovcommented, Jul 31, 2019

any progress on this?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Strong Typing the State and Actions in NgRx - This Dot Labs
When working with NgRx store, it is highly recommended to provide strong and explicit types for both the State and Actions. This becomes...
Read more >
How do you dispatch multiple Actions from an Effect in Ngrx
You can use `switchMap for this - Dispatching Multiple Actions from NGRX Effects @Effect() save = this.update$.pipe( map(action ...
Read more >
Dispatch Strongly Typed Action Objects to an ngrx Store in ...
Actions in an ngrx application are fundamentally very simple with a type property and usually a payload property. As a result, actions can...
Read more >
NgRx – tips & tricks - Angular.love
However, very few people know that using this operator without the ... that when the same action is called for different objects the...
Read more >
Managing State in Angular Applications using NgRx - Nx Blog
I use NgRx 8, entity, creator functions. I use NestJS to implement the ... In other words, the router should invoke the reducer,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found