How to write mapDispatchToProps when passing data? - redux

Question

I'm struggling with Redux a little. I'm trying to dispatch an action to redux that will contain data - I can send the dispatch and get a successful response without it, so how do I rewrite the code so I can send data across?
I'm using RN image picker to choose an image. Once the user has chosen an image (in the getPhotoFromGallery function), it will get written to the local state where that local state will then be passed into a function dispatch in redux. I'm getting the error this.props.addImageToPost(imageData) is not a function
class MyForm extends React.Component {
state = {
imageData: null,
caption: null,
base64URI: null
}
//choose the photo.
getPhotoFromGallery = () => {
const { imageData } = this.state
ImagePicker.launchImageLibrary({}, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else {
//send image to redux
this.setState({ imageData: response });
this.setState({ base64URI: response.uri });
this.props.addImageToPost(imageData) // ????
}
});
};
//show image in component
showPickedImage() {
const { imageData } = this.state;
if (imageData !== null) {
return (
<Image
source={{ uri: imageData.uri }}
style={{ alignSelf: 'center', width: 90, height: 90, borderRadius: 20, marginLeft: 15 }}
/>
);
} else {
return (
<View>
<TouchableOpacity
style={{ alignSelf: 'center', width: 90, height: 90, borderRadius: 20, marginLeft: 15, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', shadowColor: "#000", shadowOffset: { width: 0, height: 5, }, shadowOpacity: 0.2, shadowRadius: 15, }}
onPress={this.getPhotoFromGallery}
>
<Icon name="camera" size={32} color="black" />
</TouchableOpacity>
</View>
);
}
}
render() {
const { image } = this.props;
return (
<View style={styles.myFormContainer}>
{this.showPickedImage()}
</View>
);
}
function mapStateToProps(state) {
return { imageData: state.post.imageData }
}
const mapDispatchToProps = {
addImageToPost, // ????
};
export default connect(mapStateToProps, mapDispatchToProps)(MyForm)

Answer 1

See Connect: Dispatching Actions with mapDispatchToProps.
It should be something like this
const mapDispatchToProps = dispatch => ({
addImageToPost: (imageData) => dispatch({ type: 'ActionType', payload: imageData })
});
or if you have an action creator
const mapDispatchToProps = dispatch => ({
addImageToPost: (imageData) => dispatch(myActionCreator(imageData))
});
and use it in your component like so
else {
//send image to redux
this.setState({ imageData: response });
this.setState({ base64URI: response.uri });
this.props.addImageToPost(imageData); // ???? correct
}