How to use react-native-image-picker with Redux in 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);