Skip to content

Instantly share code, notes, and snippets.

View fetch
fetch('https://hoge.com/users/1', {method: 'GET'})
View environement.ts
import '../mocks/browser'; // add code
export const environment = {
production: false,
};
View browser.js
import { setupWorker, rest } from 'msw'
export const mocks = [
rest.get('https://hoge.com/users/:user', (req, res, ctx) => {
const { user } = req.params
return res(
ctx.status(200),
ctx.json({
name: `mocked-${user}`,
View init
// 例(myorgは自分のアプリ名)
npx msw init apps/myorg/src
View msw install
npm install msw --save-dev
# or
yarn add msw --dev
View update config
// appNameは自分のアプリ名
nx g nx-ng-esbuild:add-esbuild-config appName
View install
yarn add -D nx-ng-esbuild
View app.module.ts
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
@NgModule({
declarations: [
StoreModule.forRoot({ LoginState: loginReducer}), // LoginStateはselectorで書いたキー
EffectsModule.forRoot([LoginEffects]),
],
View login.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map, switchMap } from 'rxjs/operators';
import { doLogin, setLoginStateSuccess, setErrorMessage } from './login.action';
import { LoginService } from '../../services/login/login.service';
@Injectable()
export class LoginEffects {
setLoginStateSuccess$ = createEffect(() =>
View login.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { setLoginStateSuccess, setErrorMessage } from '../login/login.action';
// ↑↑↑このactionを追加
export interface LoginModel {
isLogin: boolean;
errorMessage?: string;
}
export const initialState: LoginModel = { isLogin: false };