Typescript error when injecting store to react app

Question

I'm trying to build react app with typescript using redux for state management but I'm getting this error on the app component.

-app.tsx

import React from 'react';
import { Provider } from 'react-redux';
//import { Router } from "react-router";
import store from './redux/store';
import './App.css';

function App() {
  return (
    <Provider store={store}>
    </Provider>
  );
}

export default App;

-Store.tsx

import { createStore, applyMiddleware, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';

import rootReducer from './reducers';

const loggerMiddleware = createLogger()

// For redux DevTool
declare global {
    interface Window {
      __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk, loggerMiddleware)
);

const initialState = {};

const store = createStore(rootReducer, initialState, enhancer);

export default store;

I tried to inject the store in the index but i have the same error with.. Any idea where the issues came from??

Not yet I created the type on types.d.tsx but I'm still getting the error.. — B. DIAKHATE
– B. DIAKHATE, Commented May 21, 2020 at 16:47
You shouldn't put it on types.d.tsx, but rather on a .tsx or .ts file instead. In addition, you will need to use the type on your rootReducer and initialState too. — wentjun
– wentjun, Commented May 21, 2020 at 16:53

wentjun · Accepted Answer · 2020-05-21 04:57:52Z

1

That is because TypeScript is unable to infer the typings of your redux store state.

If you have not created the types, you will need to define the types of your store using interfaces or type aliases:

export interface RootState {
  // add required properties from your store
}

On your app.tsx,

import { Store as ReduxStore } from 'redux';
 // other imports 

interface AppProps {
  store: ReduxStore<RootState>;
}

const App: React.FC<AppProps> = ({ store }) => (
  <Provider store={store}>
    <App onLoad={onLoad} />
  </Provider>
);

answered May 21, 2020 at 4:57

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript error when injecting store to react app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related