CODEWITHSUNDEEP
reactjstypescriptreduxreact-redux
Wassap124
Wassap124

Reputation: 383

How to inject dispatch actions to props using Typescript?

Im trying to create a simple project using create-react-app-typescript
First thing I wanted to set up was redux. So I did everything as normal, but now I have this problem I can't solve:

// src/App.tsx
interface AppProps {
  simpleAction: () => void;
}

class App extends React.Component<AppProps, {}> {
   ...
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  simpleAction: () => dispatch(simpleAction())
});

Everything looks ok, but when I call App like so

// index.tsx
ReactDOM.render(
    <Provider store={configureStore()}>
        <App />
    </Provider>,
    document.getElementById('root')
);

I get

[ts]  
Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<AppProps, "simpleAction">, ComponentSta...'.
  Type '{}' is not assignable to type 'Readonly<Pick<AppProps, "simpleAction">>'.
    Property 'simpleAction' is missing in type '{}'.

So ts is expecting the action to be passed through props despite it's injected in connect. Any ideas?

Upvotes: 2

Views: 5598

Answers (2)

Wassap124
Wassap124

Reputation: 383

Solution was pretty simple:

interface IMapStateToProps {}

interface IMapDispatchToProps {
  simpleAction: () => void;
}

type AppProps = IMapStateToProps & IMapDispatchToProps;

class App extends React.Component<AppProps, {}> {
...
}
...
...
...

export default connect<IMapStateToProps, IMapDispatchToProps, {}>(mapStateToProps, mapDispatchToProps)(App);

Upvotes: 2

user9947879
user9947879

Reputation:

I made a demo app a while back that is based on create-react-app-typescript + redux. Have a look at this container for an example of how to map a dispatch to a stateless component.

The pattern used in that repo above splits your components into a 'container' which maps all state and actions to props so the component can remain stateless and easy to test.

Hope that helps!

Upvotes: 1

Related Questions