Related questions

Console log the state data when using ngrx for State Management in Angular

2018-10-11 18:58 front-end_dev imported from Stackoverflow

Can anyone suggest how to console log the state when using ngrx for state management in angular application. I have gone through ngrx-store-logger but the documentation is not clear as how to create meta-reducers and use this library.

1 answer

  • answered 2018-10-12 09:14 timdeschryver

    This can be done with a meta reducer, as shown in the NgRx example app

    export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return (state: State, action: any): any => {
    const result = reducer(state, action);
    console.groupCollapsed(action.type);
    console.log('prev state', state);
    console.log('action', action);
    console.log('next state', result);
    console.groupEnd();

    return result;
  };
}

/**
 * By default, @ngrx/store uses combineReducers with the reducer map to compose
 * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
 * that will be composed to form the root meta-reducer.
 */
export const metaReducers: MetaReducer<State>[] = !environment.production
  ? [logger, storeFreeze]
  : [];

See also questions close to this topic

  • What does a state mean in Angular application?

    I am new to NgRx and going through its documentation. But, at the beginning, I'm encountered with the following sentence:

    State is a single, immutable data structure.

    What does the state mean in simple words? Need some simple examples to understand this concept.

    Do I need to learn Flux and Redux to understand these concepts?

  • Is there an operator that lets me keep the initial value from a subscription after executing ,, switchMap"?

    I try to have access to the value emitted by the initial Observable after switchMap, inside the map operator.

    https://ibb.co/1QB9zZp

    I have looked at other operators, but i didn't find out any solution.

  • File upload after NGRX dispatch action

    I'm currently using ng2 file upload from valor software to perform image upload to server.

    My previous code was written this way: After added a new post, the image uploader will upload the image based on the response id (which is the post Id). 

    this.socialPostService.addPost(postHeader).subscribe((response: PostHeader) => {
  this.pictureUploader.setOptions({
    url: this.baseUrl + 'socialphotos/post/' + response.id
  });
  this.pictureUploader.uploadAll();
}, error => {
  // this.errorService.handleError(error);
  this.errorService.handleError(error);
});

    I'm learning state management and moving this to NGRX approach and i found it difficult to perform the image upload after added the post because i could not return the post id from the post adding action.

    Below is the new approach im trying :

    Effect to work with server and add the post. 

    @Effect()
    AddPost$: Observable<Action> = this.actions$.pipe(
        ofType<PostActions.AddToPost>(
            PostActions.ActionTypes.Add_To_Post
        ),
        mergeMap((action: PostActions.AddToPost) =>
            this.socialPostService.addPost(action.payload).pipe(
                map((newPost: PostHeader) =>
                        new PostActions.AddSuccess(newPost)
                ),
                catchError(err => of(new PostActions.AddFailed(err)))
            )
        )
    );

    Dispatch add post action : 

    this.store.dispatch(new postHeaderActions.AddToPost(postHeader));
//Return post Id and perform image uploading based on that

    Is there anyway to return the newly added post id from the ngrx effect so that i could perform image uploading based on that?

    Thanks

  • How to handle ngrx/store with offline data?

    I'm new to Redux and started with ngrx. I'm unable to understand the concept of the store and his purpose.

    Say I have book store application. I can buy or sell books to users.

    I using ngrx to fetch the books list I have using this action: LOAD_BOOKS, then I using effects to load from http the list of books and save it back to the store.

    When I entered to /books, before loading the component I have guard. in this guard I check if the book list is in the store (if not I send LOAD_BOOKS action) and after the list is loaded I render the component that display all the books (from the store)

    next time when I entered to /books again, the list is in the Store.

    So I understand that I do not need to call my http to bring me this list because I have this list in the store.

    But, what happened if somebody else buy one of the books? my list of available books from the store is not updated.

    I never got to update because it is already in the store.

    So my question is how should I handle this scenario? what to store and what not? what is the purpose of this store if not to store data. the problem is what to do when the data change inside the server? I working on "offline" data

  • Getting error with merged "delete" method when trying to implement remote server methods on @ngrx/data EntityServerCommands<T> interface

    When trying to use the new @ngrx/data module and i fail to completely understand the remote server update implementation, what is the default OOTB implementation and how do i override it. when i try to implement it myself i get the error below regarding the interface duplicate EntityServerCommands.delete method. will happy for answer on my specific issue and even better a working example.

    When going through the @ngrx/data guide I couldn't find an proper explanation or howto example of how to implement the remote server update part. even not through entity-services, EntityCollectionService and EntityServerCommands.

        @Injectable({ providedIn: "root" })
export class RequestService extends EntityCollectionServiceBase<RequestInfo> implements EntityServerCommands<RequestInfo>
{
    constructor(serviceElementFactory: EntityCollectionServiceElementsFactory, private repository: DataService<RequestInfo>) {
        super("Request", serviceElementFactory);
    }

    // inherited from data/EntityServerCommands
    add(entity: RequestInfo, options?: EntityActionOptions): Observable<RequestInfo> {
        return this.repository.add(entity);
    }

    delete(entity: RequestInfo, options?: EntityActionOptions): Observable<number> {
        return this.repository.remove(entity.Id)
        .pipe(map(r => r.Request.Id));
    }

    delete(key: number, options?: EntityActionOptions): Observable<number> {
        return this.repository.remove(key)
        .pipe(map(r => r.Request.Id));
    }

    getAll(options?: EntityActionOptions): Observable<RequestInfo[]> {
        return this.repository.list();
    }
    .
    .
    .
}

    Getting mainly variation of the following errors:

    Duplicate function implementation.

    Property 'delete' in type 'RequestService' is not assignable to the same property in base type 'EntityServerCommands'. Type '(entity: RequestInfo, options?: EntityActionOptions) => Observable' is not assignable to type '{ (entity: RequestInfo, options?: EntityActionOptions): Observable; (key: string | number, options?: EntityActionOptions): Observable; }'. Types of parameters 'entity' and 'key' are incompatible. Type 'string | number' is not assignable to type 'RequestInfo'. Type 'string' is not assignable to type 'RequestInfo'.

  • What is the purpose of MemoizedSelector<type, type> in NgRx?

    So there's two ways to create a selector without specifying its type:

        export const mySelector = createSelector(getAnotherSelector, (anotherSelector) => {
        return anotherSelector * 2;
    });

    and with:

        export const mySelector: MemoizedSelector<type, type> = createSelector(getAnotherSelector, (anotherSelector) => {
        return anotherSelector * 2;
    });

    I've been experiencing some issues when using the MemoizedSelector<type, type> and I was wondering what is the purpose of it?