iamhosseindhv / notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other
https://notistack.com
Other
3.93k stars 298 forks source link

Missing properties (TS2739) with Redux #140

Closed pre-martin closed 5 years ago

pre-martin commented 5 years ago

Current Behavior

I am using notistack 0.8.8 with TypeScript 3.3.400 and Redux 4.0.1. When using my NotificationContainer (which follows the example provided in the source tree), I get the following TypeScript error:

ERROR in src/main/App.tsx(28,14):
TS2739: Type '{}' is missing the following properties from type 'Readonly<Pick<Pick<NotificationContainerProps & WithSnackbarProps, "removeNotification" | "notifications" | "enqueueSnackbar" | "closeSnackbar">, "removeNotification" | "notifications">>': removeNotification, notifications

removeNotifications and notifications are properties that should be injected by Redux.

Expected Behavior

No errors :-)

Steps to Reproduce

NotificationContainer.tsx:

interface NotificationContainerProps {
    notifications: NotificationState[];

    removeNotification(key: number): void;
}

class NotificationContainer extends React.Component<NotificationContainerProps & WithSnackbarProps> {
    // Implementation inspired by examples.
}

const mapStateToProps = (state: ApplicationState): any => {
    return {
        notifications: state.ui.notifications,
    };
};

const mapDispatchToProps = (dispatch: Dispatch<RemoveNotificationAction>): any => {
    return {
        removeNotification: (key: number) => {
            dispatch(UiActions.removeNotification(key));
        },
    };
};

export default withSnackbar(connect(mapStateToProps, mapDispatchToProps)(NotificationContainer));

Usage in App.tsx:

...
        <MuiThemeProvider theme={theme}>
            <NotificationContainer/>
            <ContentView/>
            <FooterView />
        </MuiThemeProvider>
...

The above error message (App.tsx(28,14)) points the the line <NotificationContainer/>.

It looks like if connect doesn't get picked up, because TS complains about these two properties.

Your Environment

see above in Current Behaviour

pre-martin commented 5 years ago

Removing :any as return type on mapStateToProps and mapDispatchToProps solved the problem.