Question

我对ngrx有疑问我无法使用user_data读取值，如何解决此问题？请我帮忙，因为我无法解决此问题。属性'user_data'为undefined。我该在哪里定义？

控制台错误：

store-devtools.es5.js:423 TypeError: Cannot read property 'user_data' of undefined
    at usersReducer (devicesReducer.ts:37)
    at eval (store.es5.js:220)
    at combination (store.es5.js:109)
    at computeNextEntry (store-devtools.es5.js:419)
    at recomputeStates (store-devtools.es5.js:458)
    at eval (store-devtools.es5.js:696)
    at ScanSubscriber.StoreDevtools.applyOperators.state [as accumulator] (store-devtools.es5.js:756)
    at ScanSubscriber._tryNext (scan.js:114)
    at ScanSubscriber._next (scan.js:107)
    at ScanSubscriber.Subscriber.next (Subscriber.js:95)

devicesReducers.ts

import { Action } from '@ngrx/store';
import * as devicesActions from './devicesActions';
export interface State {
  user_data: any[],
  devices: any[],
  selectedDevice: {
    name: string,
    GUID: string,
    deviceType: string
  }
};
const initialDevicesState = {
  devices: [],
  name: null,
  GUID: null,
  deviceType: null
};
const initialUserState = {
  user_data: []
}
export function devicesReducer(state = initialDevicesState , action) {
  switch (action.type){
    case devicesActions.SET_ALL_USER_DEVICES:
      return{
        ...state,
        devices:  action.payload.devices
      }
    default:
      return state;
  }
}
export function usersReducer(state = initialUserState, action) {
  switch (action.type) {
    case devicesActions.GET_USER_DATA:
      return {
      ...state,
      user_data: action.payload.user_data
    }
    default:
      return state;
  }
  }

这是效果文件

import {Actions, Effect} from '@ngrx/effects';
import {Injectable, NgZone} from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/mergeMap';
import { fromPromise } from 'rxjs/observable/fromPromise'
import * as devicesActions from './devicesActions';
import { AngularFireAuth } from 'angularfire2/auth'
import {Router} from "@angular/router";
import {AngularFirestore} from "angularfire2/firestore";
import {Store} from "@ngrx/store";
@Injectable()
export class DevicesEffects {
  @Effect({dispatch: false})
  Get_User_Data = this.actions$.ofType(devicesActions.GET_USER_DATA).map((action: any) => {
    return action.payload
  })
    .map((user_data: any) => {
      this.fs.collection('users').valueChanges().subscribe( data => {
        this.store.dispatch(new devicesActions.Get_User_Data({user_data: data}));
      });
    });
  @Effect({dispatch: false})
  getAllUserDevices = this.actions$.ofType(devicesActions.GET_ALL_USER_DEVICES).map((action:any)=>{
      return action.payload
    })
    .map((id:any)=>{
     // console.log('ajdi',id);
      this.fs.collection('users').doc(id.id).collection('devices').valueChanges().subscribe(data => {
       // console.log('sensor data z effect',data);
        this.store.dispatch(new devicesActions.SetAllUserDevices({devices:data}));
      });
    });

这是动作

import { Action } from '@ngrx/store';
export const GET_ALL_USER_DEVICES = 'GET_ALL_USER_DEVICES';
export const SET_ALL_USER_DEVICES = 'SET_ALL_USER_DEVICES';
export const SET_SELECTED_DEVICE = 'SET_SELECTED_DEVICE';
export const GET_USER_DATA = 'GET_USER_DATA';

export class GetAllUserDevices implements Action{
  readonly type = GET_ALL_USER_DEVICES;
  uid;
  constructor(public payload: {id: string}) {
    this.uid=payload.id;
  }
}
export class Get_User_Data implements Action {
  readonly type = GET_USER_DATA;
  user_data
  constructor(public payload: {user_data: any[]}) {
    this.user_data = payload.user_data;
  }
}
export class SetAllUserDevices implements Action{
  readonly type = SET_ALL_USER_DEVICES;
  devices;
  constructor(public payload: {devices: any[]}){
    this.devices = payload.devices;
  }
}
export class SetSelectedDevice implements Action{
  readonly type = SET_SELECTED_DEVICE;
  GUID;
  name;
  deviceType;
  constructor(public payload: {name,GUID,type}){
    this.GUID = payload.name;
    this.name = payload.GUID;
    this.deviceType = payload.type;
  }
}
export type DevicesActions = GetAllUserDevices | SetAllUserDevices | SetSelectedDevice | Get_User_Data ;

这是component.ts

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
@Component({
  selector: 'rcld-list-users-component',
  templateUrl: './list-users-component.component.html',
  styleUrls: ['./list-users-component.component.scss']
})
export class ListUsersComponentComponent implements OnInit {
  constructor(private store:Store<any>) { }
  users = [];
  ngOnInit() {
    this.store.dispatch({type: 'GET_USER_DATA'});
    this.store.select('user_data').subscribe(data => {
      console.log(data)
    });
  }
}

Answer 1

当您尝试分派操作时，您有@Effect({dispatch: false})。

更新为@Effect()，看看会发生什么情况

无法读取未定义的属性“ user_data”-NGRX

1 个答案: