Upon creating a new project using the C# React/Redux Web Application template in Visual Studio, an error is detected within the "\ClientApp\configureStore.ts" file.
The specific issue highlights that "createStoreWithMiddleware(allReducers, initialState)" is marked with a red underline and the error message reads:
"TS2349 (TS) Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures."
STEPS TO REPRODUCE THE ERROR:
- Launch VS 2017 Community Edition version 15.3.4
- Create a fresh C# web project utilizing .NET framework 4.7
- Select the React/Redux Web Application template along with .NET Core version 2.0
- After loading the project, there might be missing npm dependencies which can be resolved by opening the project folder in the Package Manager console and executing "npm install npm@latest -g"
- Following this fix, the site loads properly but the mentioned error related to "createStoreWithMiddleware(allReducers, initialState)" persists.
Simply ignoring or suppressing the error doesn't seem like the best approach, considering it might be as straightforward as defining a call signature or downcasting. Given my limited knowledge in TypeScript, I seek guidance for this seemingly basic question.
[UPDATE] - Removing the following line of code resolves the error display. However, disabling this line affects the functionality of devTools extension, prompting the need to understand its purpose in order to resolve the error without compromising essential features:
devToolsExtension ? devToolsExtension() : <S>(next: StoreEnhancerStoreCreator<S>) => next
Below is the content of the "configureStore.ts" file - any assistance provided in advance would be greatly appreciated!
import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer, Store, StoreEnhancerStoreCreator, ReducersMapObject } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as StoreModule from './store';
import { ApplicationState, reducers } from './store';
import { History } from 'history';
export default function configureStore(history: History, initialState?: ApplicationState) {
// Middleware construction to process actions before they reach the store.
const windowIfDefined = typeof window === 'undefined' ? null : window as any;
const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension as () => GenericStoreEnhancer;
const createStoreWithMiddleware = compose(
applyMiddleware(thunk, routerMiddleware(history)),
devToolsExtension ? devToolsExtension() : <S>(next: StoreEnhancerStoreCreator<S>) => next
)(createStore);
// Combining all reducers and initializing the app-wide store instance.
const allReducers = buildRootReducer(reducers);
const store = createStoreWithMiddleware(allReducers, initialState) as Store<ApplicationState>;
// Support for hot module replacement for reducers via Webpack
if (module.hot) {
module.hot.accept('./store', () => {
const nextRootReducer = require<typeof StoreModule>('./store');
store.replaceReducer(buildRootReducer(nextRootReducer.reducers));
});
}
return store;
}
function buildRootReducer(allReducers: ReducersMapObject) {
return combineReducers<ApplicationState>(Object.assign({}, allReducers, { routing: routerReducer }));
}