Angular: service和ngrx返回undefined

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'some data';
  }
}

// my.component.ts
import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my',
  template: `<div>{{ data }}</div>`
})
export class MyComponent {
  data: string;

  constructor(private myService: MyService) {
    this.data = this.myService.getData();
  }
}

// store.ts
import { createAction, createReducer, on, createSelector, createFeatureSelector } from '@ngrx/store';

export const initialState = {
  data: undefined
};

export const setData = createAction('[Data] Set Data', (data: any) => ({ data }));

export const dataReducer = createReducer(
  initialState,
  on(setData, (state, { data }) => ({ ...state, data }))
);

// app.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { dataReducer } from './store';

@NgModule({
  imports: [
    StoreModule.forRoot({ data: dataReducer })
  ]
})
export class AppModule {}

// my.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { setData } from './store';

@Component({
  selector: 'app-my',
  template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
  data$ = this.store.select(state => state.data);

  constructor(private store: Store) {
    this.store.dispatch(setData({ data: 'some data' }));
  }
}

// store.ts
export const initialState = {
  data: 'initial data'
};

// store.ts
export const selectData = createSelector(
  (state) => state.data,
  (data) => data
);

// my.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectData } from './store';

@Component({
  selector: 'app-my',
  template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
  data$ = this.store.select(selectData);

  constructor(private store: Store) {}
}