Understand and downloading NgRx store in JSON format

Question

I have boilerplate from another contractor and am new to NgRx (and Angular in general - it's my first app). I need to get the store in JSON form output via a text file. I am stuck on the @effect:

@Effect({ dispatch: false })
 downloadJSON$ = this.actions$.pipe(
       ofType(WorkActionTypes.DownloadJSON),
       withLatestFrom(this.store.select(fromApp.getWorkState)),
       map(([empty, work]) => {

           //stuck on this part of the code
       })
   );

Can I get some direction/help/code? I am trying to do it without using a library too. Thanks.

I already answer you this question already long time ago. You can not store the file content in your store that's is against Redux principle — Tony Ngo, Aug 16 '19 at 04:30
who says anything about storing it in the store? I want to output a file. — cdub, Aug 16 '19 at 06:17
What do you plan to do with the file? give it to the user? Post it to the backend? — SGalea, Sep 06 '19 at 14:43

score 0 · Answer 1 · answered Sep 06 '19 at 14:31

You can try injecting DOCUMENT object in your effects.

import { DOCUMENT } from '@angular/common';

@Injectable()
export class AppEffects {
  constructor(
    private actions$: Actions,
    @Inject(DOCUMENT) private document: Document) { }

  @Effect({ dispatch: false })
  downloadJSON$ = this.actions$.pipe(
    ofType(WorkActionTypes.DownloadJSON),
    withLatestFrom(this.store.select(fromApp.getWorkState)),
    map(([empty, work]) => {

      const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(work));
      const downloadAnchorNode = this.document.createElement('a');
      downloadAnchorNode.setAttribute("href", dataStr);
      downloadAnchorNode.setAttribute("download", "store.json");
      this.document.body.appendChild(downloadAnchorNode); // required for firefox
      downloadAnchorNode.click();
      downloadAnchorNode.remove();

    })
  );

}

Credits

Understand and downloading NgRx store in JSON format

1 Answers1