React is a JavaScript framework used to build web apps. Redux is an open-source library used to manage the state of an application, and is often used along with React JS.<\/p>\n
In this context, the Redux <Provider> component is used to pass application state along to its children components. It is best practice to wrap the entirety of your app in the <Provider> component, and pass the store object into it as an argument (property):<\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport { Provider } from 'react-redux';\nimport App from '.\/App';\nimport { store } from '.\/state';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nroot.render(\n <React.StrictMode>\n <Provider store={store}>\n <App \/>\n <\/Provider>\n <\/React.StrictMode>\n);\n<\/pre>\nIn my project, this was producing an error on the <Provider> component that said “No overload matches this call.” I knew this must have something to with the argument(s) being passed along.<\/p>\n
![\"No](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2023\/04\/No-overload-matches-this-call..png\")
<\/p>\n
At first I thought it might have something to do with my store object, but that was not it. I was able to resolve this roadblock by explicitly passing a ProviderProps object into the Provider component.<\/span><\/p>\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport { Provider, ProviderProps } from 'react-redux';\nimport App from '.\/App';\nimport { store } from '.\/state';\n\n\nconst providerProps: ProviderProps = {\n store: store,\n};\n\nconst root = ReactDOM.createRoot(\n document.getElementById('root') as HTMLElement\n);\n\nroot.render(\n <React.StrictMode>\n <Provider {...providerProps}>\n <App \/>\n <\/Provider>\n <\/React.StrictMode>\n);\n\n<\/pre>\nThis worked because the store<\/code>\u00a0object is explicitly typed in the ProviderProps object. This ensures that it\u00a0matches the type expected by the Provider<\/code> component. Ultimately, it was a TypeScript error. TypeScript was not able to infer the store<\/code> type correctly.<\/p>\nThis was a bug I encountered while building a web app for an Udemy course called “React and Typescript: Build a Portfolio Project<\/a>“.<\/p>\n","protected":false},"excerpt":{"rendered":"This post documents a solution for the following error I encountered in a React TypeScript project that was using Redux: No overload matches this call. Overload 1 of 2, ‘(props: ProviderProps<Action> | Readonly<ProviderProps<Action>>): Provider<Action>’, gave the following error. Type ‘{ children: Element; store: Store<{ readonly [$CombinedState]?: undefined; } & { repos: ReposState; }, Action>; }’ … <\/p>\n