Error using createStore with typescript and thunk

Question

I am new to typescript and am trying to convert a react app to use typescript. When using the createStore function from 'redux' in my index.tsx file, I am getting the following error.

  Type '{}' is missing the following properties from type '{ customersLoading: boolean; customersLoadError: boolean; customers: {}; editCustomerInProgress: boolean; editCustomerSuccess: boolean; editCustomerFail: boolean; addCustomerInProgress: boolean; ... 6 more ...; searchResults: {}; }': customersLoading, customersLoadError, customers, editCustomerInProgress, and 10 more.  TS2345

It seems like the state is being defined as a type of {}, but I have defined an interface for the state object.

Index.js

import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';

import reducer from './store/reducer';

import * as serviceWorker from './serviceWorker';

const composeEnhancers = compose;

const rootReducer = reducer;

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);


ReactDOM.render(app, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

Reducer.tsx

import {stateShape, actionShape} from '../types/index';

const initialState = {
    customersLoading: false,
    customersLoadError: false,
    customers: {},
    editCustomerInProgress: false,
    editCustomerSuccess: false,
    editCustomerFail: false,
    addCustomerInProgress: false,
    addCustomerSuccess: false,
    addCustomerFail: false,
    deleteCustomerInProgress: false,
    deleteCustomerSuccess: false,
    deleteCustomerFail: false,
    searchMode: false,
    searchResults: {}
};

const updateObject = (oldObject: {}, updatedProperties: {}) => {
    return {
        ...oldObject,
        ...updatedProperties
    };
};

const editCustomer = (state: stateShape, action: actionShape) => {
    let updatedState = {
        editCustomerInProgress: false,
        editCustomerFail: false,
        editCustomerSuccess: true,
        customers: {
            ...state.customers,
            [action.payload.customerId]: action.payload.customerDetails
        },
        searchResults: {...state.searchResults}
    };

    if (state.searchMode){
        updatedState = {
            ...updatedState,
            searchResults: {
                ...state.searchResults,
                [action.payload.customerId]: action.payload.customerDetails
            }
        }
    };
    return updateObject(state, updatedState);
};

const addCustomer = (state: stateShape, action: actionShape) => {
    const updatedState = {
        addCustomerInProgress: false,
        addCustomerFail: false,
        addCustomerSuccess: true,
        customers: {
            ...state.customers,
            [action.payload.customerId]: action.payload.customerData
        }
    };
    return updateObject(state, updatedState);
};

const deleteCustomer = (state: stateShape, action: actionShape) => {
    const updatedState = {
        deleteCustomerInProgress: false,
        deleteCustomerFail: false,
        deleteCustomerSuccess: true,
        customers: {
            ...state.customers,
            [action.payload.customerId]: null
        }
    };
    return updateObject(state, updatedState);
};

const searchCustomers = (state: stateShape, action: actionShape) => {
    interface arrayInterface {
        [key: number]: any 
    };

    //filter matching customers from list of customers by search term
    const matchingCustomers = Object.entries(state.customers).filter((current: arrayInterface) => {
        let firstname = current[1].firstName.toLowerCase();
        let lastname = current[1].lastName.toLowerCase();
        let searchTerm = action.payload.searchTerm.toLowerCase();
        return firstname === searchTerm || lastname === searchTerm;
    });

    let matchingCustomersObject;

    matchingCustomers.forEach((current: arrayInterface) => {
        matchingCustomersObject[current[0]] = current[1];
    });

    const updatedState = {
        searchMode: true,
        searchResults: matchingCustomersObject
    };

    return updateObject(state, updatedState);
};

let reducer = (state = initialState, action: actionShape) => {
    switch (action.type){
        case actionTypes.LOAD_CUSTOMERS_START:
            return updateObject(state, {customersLoading: true});
        case actionTypes.LOAD_CUSTOMERS_FAIL:
            return updateObject(state, {customersLoading: false, customersLoadError: true});
        case actionTypes.LOAD_CUSTOMERS_SUCCESS:
            return updateObject(state, {customersLoading: false, customers: action.payload.customers});
        case actionTypes.EDIT_CUSTOMER_START:
            return updateObject(state, {editCustomerInProgress: true, editCustomerSuccess: false});
        case actionTypes.EDIT_CUSTOMER_FAIL:
            return updateObject(state, {editCustomerInProgress: false, editCustomerFail: true});
        case actionTypes.EDIT_CUSTOMER_SUCCESS:
            return editCustomer(state, action)
        case actionTypes.ADD_CUSTOMER_START:
            return updateObject(state, {addCustomerInProgress: true});
        case actionTypes.ADD_CUSTOMER_FAIL:
            return updateObject(state, {addCustomerInProgress: false, addCustomerFail: true});
        case actionTypes.ADD_CUSTOMER_SUCCESS:
            return addCustomer(state, action);
        case actionTypes.DELETE_CUSTOMER_START:
            return updateObject(state, {deleteCustomerInProgress: true});
        case actionTypes.DELETE_CUSTOMER_FAIL:
            return updateObject(state, {deleteCustomerInProgress: false, deleteCustomerFail: true});
        case actionTypes.DELETE_CUSTOMER_SUCCESS:
            return deleteCustomer(state, action);
        case actionTypes.SEARCH_CUSTOMER_START:
            return searchCustomers(state, action)
        case actionTypes.SEARCH_CUSTOMER_END:
            return updateObject(state, {searchMode: false, searchResults: []})
        default:
            return state;
    }
};

export default reducer;

Action and state shapes imported by reducer.tsx

    customersLoading: boolean,
    customersLoadError: boolean,
    customers: {},
    editCustomerInProgress: boolean,
    editCustomerSuccess: boolean,
    editCustomerFail: boolean,
    addCustomerInProgress: boolean,
    addCustomerSuccess: boolean,
    addCustomerFail: boolean,
    deleteCustomerInProgress: boolean,
    deleteCustomerSuccess: boolean,
    deleteCustomerFail: boolean,
    searchMode: boolean,
    searchResults: {}
};

export interface actionShape {
    type: string,
    payload: {
        customerId: string,
        customerData: Object,
        customerDetails: Object,
        customers: Object,
        searchTerm: string
    }
};

Is anyone able to point me in the right direction to fix this problem?

Answer 1

Problem arises from reducer signature incompatibility. Lets look at how createStore is defined.

export interface StoreCreator {
    <S, A extends Action, Ext, StateExt>(
        reducer: Reducer<S, A>,
        enhancer?: StoreEnhancer<Ext, StateExt>
    ): Store<S & StateExt, A> & Ext
    <S, A extends Action, Ext, StateExt>(
       reducer: Reducer<S, A>,
       preloadedState?: DeepPartial<S>,
       enhancer?: StoreEnhancer<Ext>
    ): Store<S & StateExt, A> & Ext
}

Essentillly it is overloaded function and we are interested in type of the first argument, reducer .

export type Reducer<S = any, A extends Action = AnyAction> = (
    state: S | undefined,
    action: A
) => S

Reducer takes two arguments of type S (for state ) and of type A (for action) and returns value of type S .

But your reducer defined as follows

let reducer = (state = initialState, action: actionShape) => { /*...*/ }

For all actions it returns updateObject(state, { /*...*/ }) which in turn defined as

const updateObject = (oldObject: {}, updatedProperties: {}) => 
{
    return {
        ...oldObject,
        ...updatedProperties
    }
}

As a result TS infer return type of updateObject to be {} and it is incompatioble with S which is stateShape in your case.

To solve this issue I suggest to use following signature for updateObject

const updateObject = (oldObject: stateShape, updatedProperties: Partial<stateShape>): stateShape => {/*...*/}

So it takes first argument of type stateShape and second - as Partial<stateShape> . This allows you to pass second argument with only some properties of original stateShape , but prohibits adding non existant properties to state.

It also good idea to update signature of reducer function to make it return only stateShape

let reducer = (state = initialState, action: actionShape): stateShape