Skip to content

Instantly share code, notes, and snippets.

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 };
View login.action.ts
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を更新したい時。更新したい値を引数にする
View login.selectors.ts
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
View login.reducer.ts
export interface LoginModel {
isLogin: boolean;
errorMessage?: string;
}
export const initialState: LoginModel = { isLogin: false };
View add command
yarn add @reduxjs/toolkit
yarn add redux
yarn add @ngrx/store-devtools
View copy
ionic capacitor copy ios
View open
ionic capacitor open ios
View install deploy utilyty
npm install -g ios-sim
brew install ios-deploy