首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法读取未定义的NGRX的属性'user_data‘

无法读取未定义的NGRX的属性'user_data‘
EN

Stack Overflow用户
提问于 2019-04-11 17:30:49
回答 1查看 196关注 0票数 0

我对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)
    });
  }
}
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55629171

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档