Ngrx存储已更新但未显示

时间:2018-08-17 07:44:18

标签: javascript angular rxjs ngrx

我目前正在学习ngrx / store + RxJS6课程,并进行了一些调整,以使它们与最新版本保持一致。但是,这意味着解决方案中的代码看上去与我的不同。

问题

我的商店成功获取了所有papiticipant并更新了状态,但是当尝试更新变量name以显示userId3的参与者的名称时,没有任何反应更新或引发错误。

Screenshot of console

Thread-section.component.ts

export class ThreadSectionComponent implements OnInit {
userName: string;

constructor(private threadsService: ThreadsService, private store: Store<ApplicationState> ) {
    store
        .pipe(
            tap(state => console.log(state.storeData)),
            filter(state => typeof state.storeData !== 'undefined')
        )
        .subscribe(
        state => {
            this.userName = state.storeData.participants[state.uiState.userId].name;
        }
    );

}

ngOnInit() {
    this.threadsService.loadUserThreads()
        .subscribe(allUserData => this.store.dispatch(
            new LoadUserThreadAction(allUserData)
        ));
}

Reducers.ts

   export const reducers = {
  storeReducers: storeReducer
};

function storeReducer(state: ApplicationState =  INITIAL_APPLICATION_STATE, action: Action): ApplicationState {
  switch (action.type) {
      case LOAD_USER_THREADS_ACTION:
        return handleLoadUserThreadsAction(state, action);
      default:
        return state;
  }
}
function handleLoadUserThreadsAction(state: ApplicationState, action: LoadUserThreadAction): ApplicationState {
  const userData = action.payload;
  const newState: ApplicationState = Object.assign({}, state);
  newState.storeData = {
      participants: _.keyBy(action.payload.participants, 'id'),
      messages: _.keyBy(action.payload.messages, 'id'),
      threads: _.keyBy(action.payload.threads, 'id')
  };
  return newState;
}

Participant.ts

   export interface Participant {
    id: number;
    name: string;
}

Application-state.ts

import {INITIAL_UI_STATE, UiState} from './ui-state';
import {INTIAL_STORE_DATA, StoreData} from './store-data';
export interface ApplicationState {
    uiState: UiState,
    storeData: StoreData
}

export const INITIAL_APPLICATION_STATE: ApplicationState = {
    uiState: INITIAL_UI_STATE,
    storeData: INTIAL_STORE_DATA
};

美国

export interface UiState {
    userId: number;
    currentThreadId: number;
}

export const INITIAL_UI_STATE: UiState = {
    userId: 3,
    currentThreadId: undefined
};

Store-data.ts

    export interface StoreData {
    participants: {[key: number]: Participant};
    threads: {[key: number]: Thread};
    messages: {[key: number]: Message};
}

export const INTIAL_STORE_DATA: StoreData = {
    threads: {},
    messages: {},
    participants: {}
};

问题:

我对大家的问题是,为什么我的变量没有更新?我一直在思考未捕获的typeError,但是它不显示错误的事实使我认为这是一个逻辑错误。

0 个答案:

没有答案