Agfdhyk

How can I save an image in redux and later accessing this image 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:

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)=>{

    var saveProfile=this.props.yourProfile

    this.props.dispatch(saveProfile(yourProfile));

  }



  handleName=(name)=>{

    this.props.dispatch(saveProfile(name));

  }



  handlePhone=(phone)=>{

    this.props.dispatch(saveProfile(phone));

  }



  handleEmail=(email)=>{

    this.props.dispatch(saveProfile(email));

  }



  handleAvatar=(avatar)=>{

    this.props.dispatch(saveProfile(avatar));

  }



  handleVibrate = (vibrate) => {

    if (vibrate===true){

      Vibration.vibrate(DURATION); 

    } else {

      Vibration.cancel()

    } this.setState({

      vibrate

    });

  }



  render() {

    return (

      <View style={styles.container}>

        <TextInput

          placeholder="name"

          onChangeText={this.handleName}

        />

        <TextInput

          placeholder="phone"

          keyboardType="phone-pad"

          onChangeText={this.handlePhone}

        />

        <TextInput

          placeholder="email"

          keyboardType="email-address"

          onChangeText={this.handleEmail}

        />

        <TextInput

          placeholder="avatarUrl"

          keyboardType="url"

          onChangeText={this.handleAvatar}

        />

        <Switch

          value={this.state.vibrate}

          onValueChange={this.handleVibrate}

        />

        <Button

          title="Save"

          onPress={this.saveProfile}

        />

      </View>

    );

  }

}



function mp(state){

  return {

    yourProfile:state.saveProfile.yourProfile

  }

}



export default connect(mp)(yourProfile);

And here is my code for displaying the image in Main:

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 (

      <View style={styles.container}>

        <Image

          source={this.state.avatar}

          style={{width: 300, height: 300}}

        />

        <Text>{name}</Text>

        <Text>{phone}</Text>

        <Text>{email}</Text>

        <Settings />

      </View>

    );

  }

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});



function mp(state){

  return{



  }

}



export default connect(mp)(Main);

Steps to store something in the redux store

1. Dispatch an action with the data (your image URL).




2. Create a reducer and save the data in a store variable.




3. Connect the react component in which you want to access the data from the redux store




4. Now the data from redux store variable is available in your component as props.

This questions more seems like you want a tutorial rather than a solution to a problem.

Go through this official documentation. mapStateToProps and mapDispatchToProps is the key to your problem.

If your avatar is relatively small, you might want to save it in Base64 format, and use that in your Redux store

In order to load it up in the <Image> component, it must be in this format:

data:image/png;base64,<your base64 image here>

You have to add the encoding method to the source property of <Image>

<Image

   source= {uri:'data:image/png;base64,' + {this.state.avatar}}

   style={{width: 300, height: 300}}

/>

And it would be a good practice to access it through props rather than state.