Angular-Redux Thunk AppState未定义

时间:2018-09-04 08:41:07

标签: angular typescript redux redux-thunk

我对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中查看时,我可以看到它包含所有数据:

redux devtools

关于出什么问题了吗?

谢谢!!

1 个答案:

答案 0 :(得分:1)

上限很重要,userbo不是userBO