我对Redux Thunk并不陌生,但是现在我想我错过了一些东西,因为它无法正常工作,我只是想不通。 我的动作课:
@Injectable()
export class UserBOActions {
service: WebApiPromiseService;
constructor(private http: Http, @Inject(APP_STORE_TOKEN) private appStore, private httpClient: HttpClient) {
this.service = new WebApiPromiseService(http, this.userToken.toString());
}
get userToken(): any[] {
return this.appState.user.userToken;
}
get appState(): AppState {
return this.appStore.getState();
}
GetTypes(Token: string) {
return async (dispatch) => {
const userTypes = await this.service.getService("User/GetUserTypes", Token);
dispatch({
type: "INIT_GetTypes",
userTypes: userTypes
});
}
}
GetResources(Token: string) {
return async (dispatch) => {
const resources = await this.service.getService("User/GetDestinationResource", Token);
dispatch({
type: "INIT_GetResources",
resources: resources
});
}
}
}
减速器类:
import { LkpUserDestinationResource } from "../../Model/LkpUserDestinationResource";
import { LkpUserType } from "../../Model/LkpUserType";
export interface UserBOContentState {
res: boolean;
userTypes: LkpUserType[];
resources: LkpUserDestinationResource[];
}
export function UserBOContentReducer(state: UserBOContentState, action) {
if (state === undefined) {
return {
};
}
if (action.type == "INIT_UpdateUser") {
return {
res: action.res,
userTypes: state.userTypes,
resources: state.resources,
};
}
if (action.type == "INIT_GetTypes") {
return {
res: state.res,
userTypes: action.userTypes,
resources: state.resources,
};
}
if (action.type == "INIT_GetResources") {
return {
res: state.res,
userTypes: state.userTypes,
resources: action.resources,
};
}
return state;
}
App Store类:
import { InjectionToken } from "@angular/core";
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { UserBOContentState, UserBOContentReducer } from './BackOffice/reducers/user.reducer';
export interface AppState {
userBO: UserBOContentState;
}
const reducer = combineReducers({
userbo: UserBOContentReducer
})
const rootReducer = (state, action) => {
if (action.type === 'USER_LOGOUT') {
state = undefined
} return reducer(state, action)
}
export const appStore = createStore(rootReducer, composeWithDevTools(applyMiddleware(reduxThunk)));
export const APP_STORE_TOKEN = new InjectionToken("APP_STORE_TOKEN");
应用模块类:
import { UserBOActions } from "./BackOffice/actions/user.actions";
providers: [
UserBOActions
{ provide: APP_STORE_TOKEN, useValue: appStore },
{ provide: LocationStrategy, useClass: HashLocationStrategy },
OnlyLoggedInUsersGuard,
CookieService,
]
请注意,我只发布了App Store和App Module的相关部分,这是一个完整的大型项目,我使用Redux的其他地方也没有问题。
现在,我尝试通过以下方式从UserBOActions中获取值。 ngOnInit():
this.appStore.dispatch(this.userActions.GetResources(this.userToken.toString()));
this.appStore.dispatch(this.userActions.GetTypes(this.userToken.toString()));
let interval = setInterval(() => {
if (this.userTypes != null && this.resources != null) {
clearInterval(interval);
this.curType = this.userTypes.find(t => t.UserTypeID === this.user.UserTypeID);
this.curResource = this.resources.find(t => t.UserDestinationResourceID === this.user.UserDestinationResourceID);
}
}, 100);
获取:
get userTypes(): LkpUserType[] {
if (this.appState.userBO) {
return this.appState.userBO.userTypes;
}
}
get resources(): LkpUserDestinationResource[] {
if (this.appState.userBO) {
return this.appState.userBO.resources;
}
}
通过调试和控制台打印,我可以看到“ userBO”是未定义的。 但是,当在Redux DevTools中查看时,我可以看到它包含所有数据:
关于出什么问题了吗?
谢谢!!
答案 0 :(得分:1)
上限很重要,userbo不是userBO