Open
Description
I try to integration connect with redux-thunk
, and overwrite connect function like this:
import * as React from 'react'
import { connect as reactReduxConnect } from 'react-redux'
import {
bindActionCreators,
Dispatch,
ActionCreatorsMapObject,
} from 'redux'
/**
* This is just a small wrapper around react-redux's connect function
* @param Component The component you want to connect
* @param mapStateToProps The "normal" mapStateToProps function
* @param mapActionCreatorsToProps A function that returns an object with the actions your component will call
*/
export default function connect(
Component: React.ComponentType<any>,
mapStateToProps: (
state: Object,
ownProps: Object
) => Object,
mapActionCreatorsToProps: (
dispatch?: Dispatch<any>
) => ActionCreatorsMapObject = () => ({}) // This default value is just a function that returns an empty object
) {
return reactReduxConnect(
mapStateToProps,
(dispatch: Dispatch<any>) =>
bindActionCreators(
mapActionCreatorsToProps(dispatch),
dispatch
)
)(Component)
}
Then I use it like a usual connect
**interface IProps {
testId: string;
haah: number;
getCharacters: Function;
setCharacter: Function;
searchCharacters: Function;
character: any;
characters: ICharacter[];
isFetching: Boolean;
}
// Note: This is mainly done to enable testing
export const CharacterContainer: React.FunctionComponent<IProps> = ({
testId,
getCharacters,
character,
}) => {
//render component
};
// Make data available on props
const mapStateToProps = (store: any) => {
return {
character: store.characterState.character,
};
};
// Make functions available on props
const mapDispatchToProps = (dispatch: any) => {
return {
getCharacters: () => dispatch(getCharactersStartActionCreator()),
};
};
// Connect the app aware container to the store and reducersreduxConnect
export default connect(CharacterContainer, mapStateToProps, mapDispatchToProps);**
Metadata
Metadata
Assignees
Labels
No labels