React應用程序在加載Redux存儲時崩潰

我目前正在進入React，Redux和Typescript我對它們還是比較陌生的。我所做的應用純粹是爲了學習Redux。這是一個簡單的搜索框，它應該更新商店

但是，當我嘗試在我的組件中加載AppStore時，應用程序崩潰。

的終極版應用React應用程序在加載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);

我的容器組件含（有終極版/智能組件交互）「啞」組件

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]:: Unable to load web part WebPart.FabricReduxWebPart.77c43a83-9506-4645-83f1-d930de78a55c,Error: ***Failed to load component "a1d9e197-3ac8-4594-92b9-bac4b92086e8" (FabricReduxWebPart). Original error: ***Failed to load entry point from component "a1d9e197-3ac8-4594-92b9-bac4b92086e8" (FabricReduxWebPart). script resources due to: {1}. CALLSTACK:: Error at SPWebPartError.SPError [as constructor] (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js:13577:26) at new SPWebPartError (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:988:30) at Function.SPWebPartError.create (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1012:18) at https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1884:65

來源

2017-05-12 Nick Prozee