Q:

Unable to retrieve Redux Store

I'm writing a simple redux + typescript + react + office-fabric-ui application.
Something is wrong in my Redux environment but I cannot find out why because the error I get back is not much use to me.

My Redux app is divided in 4 files (Actions, Reducers, States and the Store).
I will post these files below, also the error included, hope someone can tell me what is wrong in my Redux setup.

The error occurs when passing the store to my component via props

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

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

Reducers
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;
    }
};

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

The error (but I think this is reflecting a result of the problem, not the cause so you might ignore it).

[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part
  WebPart.CompContainerWebPart.ced8cf14-1b0d-4762-ae73-58e62f6783bf,Error:
  ***Failed to load component "ef65c0df-ff5c-4535-9852-6dc48f43efb6" (CompContainerWebPart). Original error: ***Failed to load entry point
  from component "ef65c0df-ff5c-4535-9852-6dc48f43efb6"
  (CompContainerWebPart). script resources due to: {1}. CALLSTACK::
  Error at SPError
  (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js:13577:11)
  at SPWebPartError
  (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:988:11)
  at SPWebPartError.create
  (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1012:11)
  at Anonymous function
  (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1884:23)

A:

The problem was located in my 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;
    }
};

I was setting the newDialogState before my switch case.
Redux initializes all stores with a @@Init value what made the reducer crash.
Moving the newDialogState into the switch case solved it ;)

