NgRxOrchestrator

A Powerful State Management Toolkit for Angular

The library is in early development!

What is NgRxOrchestrator?

NgRxOrchestrator is a comprehensive toolkit designed to streamline the management of application state in Angular projects using the Redux pattern with NgRx. By integrating immer for immutable state transformations, NgRxOrchestrator simplifies the creation and handling of action-driven state changes, enhancing the readability and maintainability of your code. This library provides a set of utilities that automate the boilerplate of setting up and managing state flows, including loading, success, and error handling for asynchronous operations. Whether you are building a complex enterprise-level application or a simple interactive interface, NgRxOrchestrator helps you implement a clean, scalable, and efficient state management architecture.

Features

• Automated Action Groups: Generate load, success, failure, and reset actions seamlessly.
• Immutable State Management: Leverage immer for safe, straightforward state updates even in deeply nested structures.
• Type Safety: Utilize TypeScript for robust type checking and IntelliSense support throughout your state management logic.
• Flexible Integration: Easily integrate with existing Angular and NgRx projects, enhancing functionality without disrupting current architectures.

Dependencies

NgRxOrchestrator depends on @ngrx/store and immer

Usage

1createDataFlowActions<Input, Result>(
2        {

3            source: 'Source',

4            action: 'Action description'
5        }
6)

createDataFlowActions returns an object containing 4 actions: { load, loadSuccess, loadFailure, reset }

The Input type is used as prop on the load action

The Result type is used as prop on the loadSuccess action

In your someState.actions.ts

1export const loadSomeStateDetails =
2        createDataFlowActions<string, SomeDto>(
3                {
4                    source: 'Some State Details',
5                    action: 'Load some state details'
6                } );
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1export const loadSomeStateDetails = createAction(
2        '[Some State Details] Load some state details',
3        props<{ id: string }>()
4);
5
6export const successfullyLoadedSomeStateDetails = createAction(
7        '[API] Successfully loaded some state details',
8        props<{ data: SomeDto }>()
9);
10
11export const failedToLoadSomeStateDetails = createAction(
12        '[API] Failed to load some state details',
13        props<{ errors: AppError[] }>()
14);
15
16export const resetSomeStateDetails = createAction(
17        '[Some State Details] Reset some state details'
18);
19
20

In your someState.reducer.ts

1export interface SomeState {
2    details: {
3        data: DummyObject
4        // You need to add loading and errors properties 
5        // in your state definition to be able to select them
6        loading: boolean
7        errors: any[],
8    };
9}
10
11export const initialState: SomeState = {
12    details: {
13        data   : null,
14        loading: false,
15        errors : []
16    },
17}

1export const reducer = createReducer(
2        initialState,

1// Notice the destructuring 
2...
3onActionGroup(
4        // the action group created with createDataFlowAction
5        loadSomeStateDetails,
6        // the path of your data from the state 
7        'details.data',
8        // the object containing the default state
9        initialState
10)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1on( loadSomeStateDetails, (state, { id }) => (
2        {
3            ...state,
4            details: {
5                ...state.details,
6                loading: true,
7                errors : []
8            }
9        }
10) )
11
12on( successfullyLoadedSomeStateDetails, (state, { data }) => (
13        {
14            ...state,
15            details: {
16                ...state.details,
17                loading: false,
18                errors : [],
19                data
20            }
21        }
22) )
23
24on( failedToLoadSomeStateDetails, (state, { errors }) => (
25        {
26            ...state,
27            details: {
28                ...state.details,
29                loading: false,
30                errors,
31            }
32        }
33) )
34
35on( resetSomeStateDetails, (state) => (
36        {
37            ...state,
38            details: {
39                ...initialState.details
40            }
41        }
42) )

Relevant reducer mentions

1onActionGroup(
2        actionGroup,
3        dataPathFromState,
4        initialState,
5        reducerFunction ?
6)

onActionGroup returns an array containing 4 ons to be used in the reducer:

[ onLoad, onLoadSuccess, onLoadFailure, onReset ]

onActionGroup by default sets the result of its loadSuccess action in the dataPathFromState property of your state

[!IMPORTANT] You can pass a fourth parameter to onActionGroup for sophisticated state updates

You can use immer's produce function to handle the state update:

1onActionGroup( deleteSomeData,
2               'list.data',
3               initialState,
4               (state, deletedId) =>
5                       produce( state, draft => {
6                                    draft.list.data = draft.list.data.filter( d => d.id!=deletedId );
7                                }
8                       )
9)

Or by manually destructuring and updating the state:

1onActionGroup( deleteSomeData,
2               'list.data',
3               initialState,
4               (state, deletedId) => (
5                       {
6                           ...state,
7                           list: {
8                               ...state.list,
9                               data: state.list.data.filter( d => d.id!=deletedId )
10                           }
11                       }
12               )
13)

In your component that needs to load the data

1this.store.dispatch( loadSomeStateDetails.load( { param: id } ) );

In your someState.selectors.ts (Selectors remain unchanged)

1export const someStateDetails = createSelector(
2        selectSomeState,
3        // You need to select the whole object containing 
4        // your data, loading and errors if you want to use the loading and errors properties
5        (state: SomeState) => state.details
6);

In your component that needs to get the data (Selecting the state remains unchanged)

1data$ = this.store.select( someStateDetails );
2// data$ Is an Observable of your data, errors and loading