角Ngrx

Question

我正面临一个问题，当我调用调度时，数据实际上并没有被存储，这可能是一个愚蠢的错误，但我是新的，所以找不到它

这是我的商店，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');
    });
  }
}

Answer 1

贵国的情况如下：

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

可能是实现方式不同，但给定的代码工作很完美。