Angular/NgRx 16 — Simplify Your Code with createActionGroup

When it comes to state management in Angular, NgRx is the go-to solution. NgRx follows the Redux pattern, which promotes clear and clean code structures. This pattern organizes your codebase into modules with a specific structure:

- +state
    selector.ts
    actions.ts
    reducer.ts
    effects.ts
- components
    childA
    childB
    childC

- container
    parentABC

- facade.ts

- feature.module.ts

- feature-routing.module.ts

Let’s delve into the +state directory. When developing a feature that interacts with the state, it's always action-triggered, a concept I like to call Action-Triggered Development (ATD). Let's explore some of the actions defined for common use cases:

• getAllEmployees
• getEmployeeById(id)
• deleteEmployeeById(id)

Considering these actions, we would usually need to write them like this:

actions.ts

const getAllEmployees = createAction(
'[FEATURE] Get All Employees'
);

const getEmployeeById = createAction(
'[FEATURE] Get Employee By id', 
props<{ id: string }>());

const putAllEmployeesToStore = createAction(
'[FEATURE] Put All Employees to Store', 
props<{ employees: Employee[] }>());

const putEmployeeToStore = createAction(
'[FEATURE] Put Employee to Store', 
props<{ employee: Employee }>());

const deleteEmployeeById = createAction(
'[FEATURE] Delete Employee By id', 
props<{ id: string }>());

export const featureActions = {
  getAllEmployees,
  getEmployeeById,
  putAllEmployeesToStore,
  putEmployeeToStore,
  deleteEmployeeById,
};

Writing all these actions can be quite heavy, and these are just a few of them. It results in a lot of boilerplate code. However, with the new update of NgRx 16, there’s a better way to handle this.

By implementing each action with the createAction function, we can now utilize createActionGroup to make our code more readable and reduce redundancy. Here's how you can rewrite it:

export const FeatureActions = createActionGroup({
  source: 'FEATURE',
  events: {
    getAllEmployees: emptyProps,
    getEmployeeById: props<{ id: string }>(),
    putAllEmployeesToStore: props<{ employees: Employee[] }>(),
    putEmployeeToStore: props<{ employee: Employee }>(),
    deleteEmployeeById: props<{ id: string }>(),
  },
});

const { getAllEmployees, getEmployeeById, putEmployeeToStore, putEmployeeToStore, deleteEmployeeById } = FeatureActions;

That’s it! Now you can use these actions and dispatch them for all your state management needs.

If you have any further questions or need assistance, please don’t hesitate to contact me. If you found this article helpful, it would greate if you will leave a follow, comment, and clap — I would truly appreciate it.

Thanks for reading!

Kind regards,

Umair Zaffar

Web: www.sifamo.com

LinkedIn: https://www.linkedin.com/in/umair-zaffar-488568155/

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.