title: How to store and access images in Redux
body: <p>How can I store an image in redux and later access it in another component? My goal is to use the TextInput to save the image url and show the actual image in another component. I'm not sure how to access the image from Profile in Main. Here's my code for saving the image in Profile:</p>
  <pre><code>import React from 'react';
  import { StyleSheet, TextInput, View, Button, Vibrate } from 'react-native';
  
  import { connect } from 'react-redux';
  import {saveProfile} from '../redux/actions';
  
  import Settings from './Settings';
  
  class Profile extends React.Component {
    
    saveProfile=(yourProfile)=&gt;{
      var saveProfile=this.props.yourProfile
      this.props.dispatch(saveProfile(yourProfile));
    }
    
    handleName=(name)=&gt;{
      this.props.dispatch(saveProfile(name));
    }
    
    handlePhone=(phone)=&gt;{
      this.props.dispatch(saveProfile(phone));
    }
    
    handleEmail=(email)=&gt;{
      this.props.dispatch(saveProfile(email));
    }
    
    handleAvatar=(avatar)=&gt;{
      this.props.dispatch(saveProfile(avatar));
    }
    
    handleVibrate = (vibrate) =&gt; {
      if (vibrate===true){
        Vibration.vibrate(DURATION); 
      } else {
        Vibration.cancel()
      } this.setState({
        vibrate
      });
    }
    
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;TextInput
            placeholder=&quot;name&quot;
            onChangeText={this.handleName}
          /&gt;
          &lt;TextInput
            placeholder=&quot;phone&quot;
            keyboardType=&quot;phone-pad&quot;
            onChangeText={this.handlePhone}
          /&gt;
          &lt;TextInput
            placeholder=&quot;email&quot;
            keyboardType=&quot;email-address&quot;
            onChangeText={this.handleEmail}
          /&gt;
          &lt;TextInput
            placeholder=&quot;avatarUrl&quot;
            keyboardType=&quot;url&quot;
            onChangeText={this.handleAvatar}
          /&gt;
          &lt;Switch
            value={this.state.vibrate}
            onValueChange={this.handleVibrate}
          /&gt;
          &lt;Button
            title=&quot;Save&quot;
            onPress={this.saveProfile}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  function mp(state){
    return {
      yourProfile:state.saveProfile.yourProfile
    }
  }
  
  export default connect(mp)(yourProfile);
  </code></pre>
  <p>And here is my code for displaying the image in Main:</p>
  <pre><code>import React from 'react';
  import { StyleSheet, Text, Image, View, Vibrate } from 'react-native';
  
  import Settings from './Settings';
  import Profile from './Profile';
  
  import {connect} from 'react-redux';
  import {saveProfile, saveSettings} from '../redux/actions';
  
  class Main extends React.Component {
    state={
      avatar: 
    }
    
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Image
            source={this.state.avatar}
            style={{width: 300, height: 300}}
          /&gt;
          &lt;Text&gt;{name}&lt;/Text&gt;
          &lt;Text&gt;{phone}&lt;/Text&gt;
          &lt;Text&gt;{email}&lt;/Text&gt;
          &lt;Settings /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  function mp(state){
    return{
      
    }
  }
  
  export default connect(mp)(Main);
  </code></pre>