angular - Angular - Redux Thunk AppState 未定义

问题描述

我对 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;
}

应用商店类：

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 时，我可以看到它包含所有数据：

关于出了什么问题的任何想法？

谢谢！！

标签： angulartypescriptreduxredux-thunk

angular - Angular - Redux Thunk AppState 未定义

问题描述

解决方案

推荐阅读