ksakae1216

// appNameは自分のアプリ名
nx g nx-ng-esbuild:add-esbuild-config appName

ksakae1216

yarn add -D nx-ng-esbuild

ksakae1216

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';

@NgModule({
  declarations: [
    StoreModule.forRoot({ LoginState: loginReducer}), // LoginStateはselectorで書いたキー
    EffectsModule.forRoot([LoginEffects]),
  ],

ksakae1216

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(() =>

ksakae1216

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 };

ksakae1216

import { createAction, props } from '@ngrx/store';

// ログインするときのactionです、ログインID、パスワードをactionの引数に持ちたい時の書き方
// '[Login] Do Login'は、'[どの画面]どんな処理'のようなイメージです
export const doLogin = createAction(
  '[Login] Do Login',
  props<{ loginId: string, password: string }>()
);

// storeのisLoginを更新したい時。更新したい値を引数にする

ksakae1216

import { createSelector, createFeatureSelector } from '@ngrx/store';

// <{ isLogin: boolean, errorMessage: string }>はstoreの型、reducerに書いたやつ
// 'LoginState'はキー。好きな名前でOK
export const selectFeature = createFeatureSelector<{ isLogin: boolean, errorMessage: string }>('LoginState');

// getIsLoginというselectorを作成し、storeからisLoginを取得
export const getIsLogin = createSelector(
  selectFeature,
  (state) => state.isLogin

ksakae1216

export interface LoginModel {
  isLogin: boolean;
  errorMessage?: string;
}

export const initialState: LoginModel = { isLogin: false };

ksakae1216

yarn add @reduxjs/toolkit
yarn add redux
yarn add @ngrx/store-devtools

ksakae1216

ionic capacitor copy ios