How to use react-native-image-picker with Redux in React-native - react-native

Question

I'am trying to use react-native-image-picker function inside the reducer to change the avatar but the image is not changing.
i can solve this by writing the image picker function inside the avatar.js file but i want to use this way.
if anyone knows how to solve this problem please.
here is my code :
avatarReducer.js
import ImagePicker from 'react-native-image-picker';
const initialState = {avatar: require('../../Images/ic_tag_faces.png')};
function setAvatar(state = initialState, action) {
var nextState;
switch (action.type) {
case 'SET_AVATAR':
ImagePicker.showImagePicker({}, response => {
if (response.didCancel) {
console.log("L'utilisateur a annulé");
} else if (response.error) {
console.log('Erreur : ', response.error);
} else {
console.log('Photo : ', response.uri);
var requireSource = {uri: response.uri};
nextState = {
...state,
avatar: requireSource,
};
return nextState || state;
}
});
return state;
default:
return state;
}
} // end function
export default setAvatar;
Avatar.js
import React from 'react';
import {StyleSheet, Image, TouchableOpacity} from 'react-native';
import {connect} from 'react-redux';
class Avatar extends React.Component {
constructor(props) {
super(props);
}
_setAvatar() {
const action = {type: 'SET_AVATAR'};
this.props.dispatch(action);
}
render() {
return (
<TouchableOpacity
style={styles.touchableOpacity}
onPress={() => this._setAvatar()}>
<Image style={styles.avatar} source={this.props.avatar} />
</TouchableOpacity>
);
}
} // end class
const mapStateToProps = state => {
return {
avatar: state.setAvatar.avatar,
};
};
export default connect(mapStateToProps)(Avatar);