Using Angular Ngrx to Retrieve and Showcase a Selection of Choices from a Java API

Question

Using Angular Ngrx to Retrieve and Showcase a Selection of Choices from a Java API

When accessing the Java API at localhost://company/products/123/fetchOptions, you can expect a response similar to the following:

{ 
 "Increase": true,
 "Decrease" : true,
 "Like" : true,
 "Dislike" : true,
 "Old" : false,
 "Others" : true
}

Using Angular and ngrx on the UI, I am tasked with fetching data from the API above and displaying all 6 values as dropdown options.

The values with boolean false will be shown in the dropdown but disabled.

How can this be achieved using Ngrx?

I have some knowledge about defining Interfaces, creating Actions, and setting up dispatchers so that I can subscribe to them in my UI component (productAttributes.component.ts).

What should my interface look like and what other steps are needed? I am currently using JSON for testing purposes, but will eventually replace it with the actual API URL.

Thank you in advance for any assistance...

javascript angular typescript ngrx

Answer 1

Answer №1

Here are the steps you need to take:

Create a feature for your store
Define a reducer
Define a selector
Create a load action
Create a success action
Create a failure action
Create an effect

Reducer


export const optionsFeatureKey = 'options';

export const optionsLoad = createAction(
    'options:load',
);

export const optionsSuccess = createAction(
    'options:success',
    props<{ data: OptionsState }>(),
);

export const optionsFailure = createAction(
    'options:failure',
);


export interface OptionsState {
    Increase: boolean;
    Decrease: boolean;
    Like: boolean;
    Dislike: boolean;
    Old: boolean;
    Others: boolean;
}

export const initialState: OptionsState = {
    Increase: false,
    Decrease: false,
    Like: false,
    Dislike: false,
    Old: false,
    Others: false,
};

const reducer = createReducer(
    initialState,

    on(optionsSuccess, (state, {data}) => ({
        ...state,
        ...data,
    })),

);

export function optionsReducer(state: OptionsState | undefined, action: Action): OptionsState {
    return reducer(state, action);
}

export const optionsFeature = createFeatureSelector<OptionsState>(optionsFeatureKey);

export const getOptions = createSelector(
    optionsFeature,
    v => v,
);

Effect


@Injectable()
export class OptionsEffects {
    public readonly load$: Observable<Action> = createEffect(() =>
        this.actions$.pipe(
            ofType(optionsLoad),
            switchMap(() => this.http.get<OptionsState>(`url.com`).pipe(
                map(data => optionsSuccess({data: data})),
                catchError(() => of(optionsFailure())),
            ),
        ),
    );

    constructor(
        protected readonly actions$: Actions,
        protected readonly http: HttpClient,
    ) {}
}

And somewhere in your app

store.dispatch(optionsLoad());

store.select(getOptions).subscribe(options => {
  // Add your logic here.
});

Answer 2

Here are the steps you need to take:

Create a feature for your store
Define a reducer
Define a selector
Create a load action
Create a success action
Create a failure action
Create an effect

Reducer


export const optionsFeatureKey = 'options';

export const optionsLoad = createAction(
    'options:load',
);

export const optionsSuccess = createAction(
    'options:success',
    props<{ data: OptionsState }>(),
);

export const optionsFailure = createAction(
    'options:failure',
);


export interface OptionsState {
    Increase: boolean;
    Decrease: boolean;
    Like: boolean;
    Dislike: boolean;
    Old: boolean;
    Others: boolean;
}

export const initialState: OptionsState = {
    Increase: false,
    Decrease: false,
    Like: false,
    Dislike: false,
    Old: false,
    Others: false,
};

const reducer = createReducer(
    initialState,

    on(optionsSuccess, (state, {data}) => ({
        ...state,
        ...data,
    })),

);

export function optionsReducer(state: OptionsState | undefined, action: Action): OptionsState {
    return reducer(state, action);
}

export const optionsFeature = createFeatureSelector<OptionsState>(optionsFeatureKey);

export const getOptions = createSelector(
    optionsFeature,
    v => v,
);

Effect


@Injectable()
export class OptionsEffects {
    public readonly load$: Observable<Action> = createEffect(() =>
        this.actions$.pipe(
            ofType(optionsLoad),
            switchMap(() => this.http.get<OptionsState>(`url.com`).pipe(
                map(data => optionsSuccess({data: data})),
                catchError(() => of(optionsFailure())),
            ),
        ),
    );

    constructor(
        protected readonly actions$: Actions,
        protected readonly http: HttpClient,
    ) {}
}

And somewhere in your app

store.dispatch(optionsLoad());

store.select(getOptions).subscribe(options => {
  // Add your logic here.
});

Using Angular Ngrx to Retrieve and Showcase a Selection of Choices from a Java API

Answer №1

Similar questions

What is the best technique for evaluating different businesses' operating hours?

What is the best way to create a compound query in Firebase?

Can you please explain the purpose of this function?

Angular 4: Loading components sequentially

Having trouble with @HostListener on iPad or iOS devices? I'm currently using a Bluetooth keyboard to navigate and interact with an Angular app

Transforming Unicode escape sequences into symbols and displaying them in a DOM element

Experimenting with throws using Jest

updating the v-model in Vue.js datepicker retains the previously set value while setting a new date

Is it possible for an AJAX request to return both HTML data and execute callback functions simultaneously?

NodeJS's pending ajax post using SailsJS

Having trouble changing my array state in react?

Utilizing slid.bs.carousel to retrieve values upon slide change

What is the best way to dynamically change the color of my component depending on the prop passed to it?

On startup of the chrome app, read and load a JSON file into a variable

Encountered a cross-domain error with node.js and jQuery: ERR_CONNECTION_REFUSED

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

What is the process for retrieving the parent component from projected content?

Can multiple print buttons in different modals be connected to individual divs within their respective modals?

:onchange event triggering iteration through a function

Automatically adjust the model input (Signal) based on the parent and respond to any alterations in the children