加载 Redux 商店时 React 应用程序崩溃

Question

我目前正在接触 React、Redux 和 Typescript，但我对它们还是有点陌生​​。我制作的应用程序纯粹是为了学习 Redux。 这是一个应该更新商店的简单搜索框

但是，当我尝试在我的组件中加载 AppStore 时，应用程序崩溃了。

Redux 应用程序

import { Action, Reducer, createStore, Store } from 'redux';

export enum ActionTypes { UPDATE_FILTER_STRING, CLEAR_FILTER_STRING }
export interface FilterStringActions extends Action {
    type: ActionTypes;
    value: string;
}

export const createUpdateFilterStringAction: (_filterString: string) => FilterStringActions = (_filterString) => ({
    type: ActionTypes.UPDATE_FILTER_STRING,
    value: _filterString
});
export const createClearFilterStringAction: () => FilterStringActions = () => ({
    type: ActionTypes.CLEAR_FILTER_STRING,
    value: ""
});

export interface AppState {
    filterString: string;
}
export const reducer: Reducer<AppState> = (state: AppState = { filterString: "" }, action: FilterStringActions) => {
    const newState: AppState = ({
        filterString: action.value
    });
    switch (action.type) {
        case ActionTypes.UPDATE_FILTER_STRING:
            return newState;
        case ActionTypes.CLEAR_FILTER_STRING:
            newState.filterString = "";
            return newState;
        default:
            return state;
    }
};

export var appStore: Store<AppState> = createStore<AppState>(reducer);

我的容器组件（与 redux/smart 组件交互）包含“哑”组件

import * as React from 'react';
import SPSearchBox from './SPSearchBox';
import { Store } from 'redux';
import * as ReduxApp from './Redux-App';

export interface IComponentsContainerProps {
  description: string;
}

export interface IComponentsContainerState {
  SearchString: String;
  store: Store<ReduxApp.AppState>;
}

export default class ComponentsContainer extends React.Component<IComponentsContainerProps, IComponentsContainerState> {
  private unsubscribe: Function;
  constructor(props) {
    super(props);

    this.state = {
      SearchString: "",
      store: ReduxApp.appStore
    };
    // this.onSearchStringChanged = this.onSearchStringChanged.bind(this);
  };

  // public componentDidMount() {
  //   this.unsubscribe = this.props.store.subscribe(() => {
  //     this.setState({
  //       SearchString: this.props.store.getState().filterString
  //     });
  //   });
  // };

  // public componentWillUnmount() {
  //   this.unsubscribe();
  // };

  public render(): React.ReactElement<IComponentsContainerProps> {
    return (<SPSearchBox />);
  };
}

如果我删除将我的商店设置为状态的行，我的应用就会运行：

this.state = {
      SearchString: "",
      store: ReduxApp.appStore //<======= This line breaks code
    };

错误

[SPWebPartErrorCode.ScriptLoadError]:: 无法加载 Web 部件 WebPart.FabricReduxWebPart.77c43a83-9506-4645-83f1-d930de78a55c，错误： ***未能加载组件“a1d9e197-3ac8-4594-92b9-bac4b92086e8”（FabricReduxWebPart）。原始错误：***无法加载入口点 来自组件“a1d9e197-3ac8-4594-92b9-bac4b92086e8” (FabricReduxWebPart)。脚本资源由于：{1}。调用堆栈:: 错误 在 SPWebPartError.SPError [作为构造函数] (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js:13577:26) 在新的 SPWebPartError (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:988:30) 在 Function.SPWebPartError.create (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1012:18) 在 https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1884:65

Answer 1

所以我解决了这个问题..

解决方案（鼓声...）

运行 gulp clean 解决了异常

又是解决复杂问题的美好一天。

哈哈