有角度的Ngrx

我遇到了一個問題，然后當我呼叫 dispatch 時，資料實際上并沒有被存盤，這可能是一個愚蠢的錯誤，但我是新手所以找不到它

這是我的商店，User是我在另一個檔案中設定的界面

import { Action } from '@ngrx/store';
import { User } from '../../interfaces/User';

export interface Appstate {
  user: User;
}

export interface ActionWithPayload<T> extends Action {
  payload: T;
}

export const initialState: Appstate = {
  user: null
};

export const Actions = {
  USER_SET: 'USER_SET',
  USER_UPDATED: 'USER_UPDATED',
  USER_DELETED: 'USER_DELETED'
};

export const userReducer = (state: Appstate = initialState, action: ActionWithPayload<User>): Appstate => {
  switch (action.type) {
    case Actions.USER_SET:
      return {
        ...state,
        user: action.payload
      };
    case Actions.USER_UPDATED:
      return {
        ...state,
        user: action.payload
      };
    case Actions.USER_DELETED:
      return {
        ...state,
        user: null
      };
    default:
      return state;
  }
};

這是我呼叫它的地方，我選擇用戶來檢查它是否正在存盤資料回傳未定義：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth/auth.service';
import { User } from './../../interfaces/User';
import { Store } from '@ngrx/store';
import { Appstate, Actions } from 'src/app/state/store';
import * as Rx from 'rxjs';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  email: string;
  password: string;
  error: string;

  constructor(private authService: AuthService, private router: Router, private store: Store<Appstate>) { }

  ngOnInit() { }

  login() {
    if (this.email === '' && this.password === '') {
      this.error = 'Please fill all fields!';
      return;
    }
    this.error = '';
    this.authService.login(this.email, this.password).subscribe(
      (data) => {
        this.storeUser(data.user);
        this.router.navigate(['/main']);
      }, (error) => {
        if (error?.error.message === 'Unauthorized') {
          this.error = 'Wrong email or password!';
          return;
        }
        if (error?.error.message === 'You are banned') {
          this.error = 'You are banned!';
          return;
        }
      });
  }

  storeUser(user: User) {
    this.store.dispatch({
      type: Actions.USER_SET,
      payload: user
    });
    this.store.select('user').subscribe((data) => {
      console.log('data: ', data);
    }, (error) => {
      console.log('error: ', error);
    }, () => {
      console.log('completed');
    });
  }
}

uj5u.com熱心網友回復：

您的狀態可能如下所示：

import { Action } from '@ngrx/store';
import { User } from '../../interfaces/User';    
export interface Appstate {
  user: User;
}
export const initialState: Appstate = {
  user : null
}

你的行動

import { createAction, props } from "@ngrx/store";
import { User } from '../../interfaces/User';


export const SET_LOGIN_SUCCESS = '[SET_LOGIN_SUCCESS]';


export const setLoginInfo = createAction(
  SET_LOGIN_SUCCESS,
  props<{ user: User }>()
);

您的選擇器

import { Appstate } from '../appState.state';
import { createFeatureSelector, createSelector } from '@ngrx/store';
export const AXS_LOGIN_USER_STATE_NAME = 'LOGIN_USER';

const getLoginUserState = createFeatureSelector<Appstate>(AXS_LOGIN_USER_STATE_NAME);
export const getLoginUser = createSelector(Appstate, (state) => {
  return state.user;
});

你的減速器

import { createReducer, on } from "@ngrx/store";
import { setLoginInfo } from "../appAction.action";
import { initialState } from "../appState.state";

const _LoginUserReducer = createReducer(
  initialState,
  on(setLoginInfo, (state, action) => {
    return {
      ...state,
      user: action.user,
    };
  }),
);
export function LoginUserReducer(state: any, action: any) {
  return _LoginUserReducer(state, action);
}

您嘗試存盤資料的組件。LoginPage

storeUser(user: User) {
    // setLoginInfo is action
    this.store.dispatch(setLoginInfo({ user: user }));
    
    // getLoginUser is selector.
    this.store.select(getLoginUser).subscribe((data) => {
      console.log('data: ', data);
    }, (error) => {
      console.log('error: ', error);
    }, () => {
      console.log('completed');
    });
  }

可能是實作方式不同，但給定的代碼可以完美運行。

標籤：有角度的ngrx商店

上一篇：根據Angular14上的另一個選擇下拉選單填充選擇下拉選單

下一篇：登錄后限制對選單的訪問