我目前正在学习ngrx / store + RxJS6课程,并进行了一些调整,以使它们与最新版本保持一致。但是,这意味着解决方案中的代码看上去与我的不同。
问题
我的商店成功获取了所有papiticipant并更新了状态,但是当尝试更新变量name
以显示userId
为3
的参与者的名称时,没有任何反应更新或引发错误。
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,但是它不显示错误的事实使我认为这是一个逻辑错误。