React App stürzt beim Laden von Redux Store

Ich bin im Moment in React, Redux und Typoskript und ich bin immer noch ein bisschen neu zu ihnen. Die Anwendung, die ich gemacht habe, war nur zum Lernen von Redux. Es ist eine einfache searchbox, die den Laden aktualisieren sollte
Wenn ich jedoch versuche, den AppStore in meiner Komponente zu laden, stürzt die Anwendung ab.

Die Redux AppReact App stürzt beim Laden von Redux Store

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);

Mein Container Komponente (interagiert mit Redux/smart-Komponente), die "dumme" Komponenten

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 />); 
    }; 
}

Wenn ich die Zeile entfernen, die meinem Speicher setzt In diesem Zustand läuft meine App:

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

Der Fehler

[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

Quelle

2017-05-12 Nick Prozee