Question

我正在编写一个简单的redux + typescript + react + office-fabric-ui应用程序 我的Redux环境出了点问题，但我找不到原因，因为我收到的错误对我没什么用处。

我的Redux应用程序分为4个文件（Actions，Reducers，States和Store）我将在下面发布这些文件，也包含错误，希望有人能告诉我Redux设置有什么问题。

通过props
将商店传递给我的组件时发生错误

商品

import { combineReducers, Store, ReducersMapObject, createStore } from 'redux';
import { dialogReducer, searchStringReducer, selectedItemsReducer } from './Reducers';
import { AppState } from './State';

export const reducersMapping: ReducersMapObject = {
    searchString: searchStringReducer,
    selectedItems: selectedItemsReducer,    
    dialog: dialogReducer
};

export var AppStore: Store<AppState> = createStore<AppState>(combineReducers<AppState>(reducersMapping));

操作

import { Action } from 'redux';
import { IDialogAppState, IItemsAppState } from './State';

export enum ActionTypes {
    UPDATE_DIALOG,
    UPDATE_SEARCH_STRING,
    UPDATE_SELECTED_ITEMS
}

export interface AppSearchStringActions extends Action {
    type: ActionTypes;
    value: string;
}

export interface AppDialogActions extends Action {
    type: ActionTypes;
    value: IDialogAppState;
}

export interface AppSelectedItemsActions extends Action {
    type: ActionTypes;
    value: IItemsAppState;
}

export const createUpdateDialogAction: (value: IDialogAppState) => AppDialogActions = (_value) => ({
    type: ActionTypes.UPDATE_DIALOG,
    value: _value
});

export const createUpdateSearchStringAction: (value: string) => AppSearchStringActions = (_value) => ({
    type: ActionTypes.UPDATE_SEARCH_STRING,
    value: _value
});

export const createUpdateSelectedItemsAction: (value: IItemsAppState) => AppSelectedItemsActions = (_value) => ({
    type: ActionTypes.UPDATE_SELECTED_ITEMS,
    value: _value
});

减速

import { Reducer } from 'redux';
import { AppSearchStringActions, ActionTypes, AppDialogActions, AppSelectedItemsActions } from './Actions';
import { IDialogAppState, IItemsAppState, AppState } from './State';

import {
    DEFAULT_STATE_IDIALOG,
    DEFAULT_STATE_IITEMS,
    DEFAULT_SEARCH_STRING_STATE
} from './State';

export const dialogReducer: Reducer<IDialogAppState> = (state: IDialogAppState = DEFAULT_STATE_IDIALOG, action: AppDialogActions) => {
    const newDialogState: IDialogAppState = ({
        isOpen: action.value.isOpen,
        Title: action.value.Title,
        Content: action.value.Content
    });

    switch (action.type) {
        case ActionTypes.UPDATE_DIALOG:
        console.log('Reducer has updated the Dialog: ' + newDialogState);
            return newDialogState;
        default:
            return state;
    }
};

export const searchStringReducer: Reducer<string> = (state: string = DEFAULT_SEARCH_STRING_STATE, action: AppSearchStringActions) => {
    switch (action.type) {
        case ActionTypes.UPDATE_SEARCH_STRING:
            console.log("Reducer has updated the searchString: " + action.value);
            return action.value;
        default:
            return state;
    }
};

export const selectedItemsReducer: Reducer<IItemsAppState> = (state: IItemsAppState = DEFAULT_STATE_IITEMS, action: AppSelectedItemsActions) => {
    const newState: IItemsAppState = {
        selectedItemName: action.value.selectedItemName,
        count: action.value.count
    };

    switch (action.type) {
        case ActionTypes.UPDATE_SELECTED_ITEMS:
            console.log("Reducer has updated the items state: " + newState);
            return newState;
        default:
            return state;
    }
};

国家

export interface IDialogAppState {
    isOpen: boolean;
    Title: string;
    Content: string;
}
export const DEFAULT_STATE_IDIALOG: IDialogAppState = {
    isOpen: false,
    Title: "",
    Content: ""
};

export interface IItemsAppState {
    count: number;
    selectedItemName: string;
};

export const DEFAULT_STATE_IITEMS: IItemsAppState = {
    count: 0,
    selectedItemName: ""
};

export interface AppState {
    searchString: string;
    selectedItems: IItemsAppState;
    dialog: IDialogAppState;
};

export const DEFAULT_SEARCH_STRING_STATE = "";
export const DEFAULT_STATE: AppState = {
    searchString: DEFAULT_SEARCH_STRING_STATE,
    selectedItems: DEFAULT_STATE_IITEMS,
    dialog: DEFAULT_STATE_IDIALOG
};

错误（但我认为这反映了问题的结果，而不是原因，因此您可能会忽略它。）

[SPWebPartErrorCode.ScriptLoadError] ::无法加载Web部件 WebPart.CompContainerWebPart.ced8cf14-1b0d-4762-ae73-58e62f6783bf，错误： ***无法加载组件“ef65c0df-ff5c-4535-9852-6dc48f43efb6”（CompContainerWebPart）。原始错误：***无法加载入口点来自组件“ef65c0df-ff5c-4535-9852-6dc48f43efb6” （CompContainerWebPart）。脚本资源由于：{1}。调用堆栈:: SPError出错（https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js:13577:11）在SPWebPartError （https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:988:11）在SPWebPartError.create （https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1012:11）在匿名功能（https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1884:23）

Answer 1

问题出在我的 Reducer ：

中

export const dialogReducer: Reducer<IDialogAppState> = (state: IDialogAppState = DEFAULT_STATE_IDIALOG, action: AppDialogActions) => {
    const newDialogState: IDialogAppState = ({
        isOpen: action.value.isOpen,
        Title: action.value.Title,
        Content: action.value.Content
    });

    switch (action.type) {
        case ActionTypes.UPDATE_DIALOG:
        console.log('Reducer has updated the Dialog: ' + newDialogState);
            return newDialogState;
        default:
            return state;
    }
};

我在newDialogState之前设置了switch case。 Redux使用@@Init值初始化所有商店，这使得减速器崩溃。将newDialogState移到switch case解决了它;）

无法检索Redux Store

1 个答案: