How to properly use React-Redux typings

I can’t seem to find a single guide around properly using react-redux typings.

I am thinking I need something like this:

import type { MapStateToProps, MapDispatchToProps } from 'react-redux';

type TMapStateToFilter = MapStateToProps<DataExplorerState, { filters: FilterData[] }, {loading: boolean, filters: FilterData[]}>
const mapStateToFilterProps: TMapStateToFilter = (state) => ({ loading: state.loading, filters: state.filters });


const mapDispatchToFilterProps: MapDispatchToProps<Action, {}, *> = (dispatch) => ({
    updateFilters(filters) { 
        dispatch({ type: "UPDATE_FILTERS", payload: filters }) 
    },
    updateData(data) { 
        dispatch({ type: "UPDATE_DATA", payload: data }) 
    },
    updateLoadState(loading) {
        dispatch({ type: "LOAD", payload: loading })
    }
});

export const FilterBoxConnect = connect(
    mapStateToFilterProps, 
    mapDispatchToFilterProps
)(FilterBox)

But it seems wrong as MapStateToProps and MapDispatchToProps are not exported and I needed to edit the type definition.

There is a preferred way to doing this, right?

[chapati23]

Thanks @villesau, that does help a bit! Had never heard of the placeholder _ type, seems to be documented nowhere 😕

Think i’ll recommend my team to stay on 0.84 a few more months until the dust settles a bit. Flow has definitely been the most painful thing for us to keep up to date in 2018:

• many breaking changes
• no semver
• no explanations for breaking changes (deprecated existential type is still in the docs, placeholder type isn’t, etc…)
• flow-typed packages have a hard time to keep up with the latest flow version as well…

Sorry, bit of a rant here, I know it’s an open source effort but I guess we’ve been spoiled too much by react and expect the same for all other fb-driven projects as well now…

[villesau]

react-redux libdefs have been rewritten since the issue so I assume it’s not longer an issue with more recent versions of Flow. I’m going to close this. Feel free to reopen if you encounter this with up-to-date Flow versions.