Mixing
Image saving and accessing with Redux
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);
reactjs react-native redux react-redux redux-thunk
asked Nov 21 '18 at 18:28
ArinaArina
269
add a comment |
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);
reactjs react-native redux react-redux redux-thunk
asked Nov 21 '18 at 18:28
ArinaArina
269
add a comment |
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);
reactjs react-native redux react-redux redux-thunk
asked Nov 21 '18 at 18:28
ArinaArina
269
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);
reactjs react-native redux react-redux redux-thunk
reactjs react-native redux react-redux redux-thunk
asked Nov 21 '18 at 18:28
ArinaArina
269
asked Nov 21 '18 at 18:28
ArinaArina
269
asked Nov 21 '18 at 18:28
ArinaArina
269
asked Nov 21 '18 at 18:28
ArinaArina
269
asked Nov 21 '18 at 18:28
ArinaArina
269
269
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Steps to store something in the redux store
Dispatch an action with the data (your image URL).
Create a reducer and save the data in a store variable.
Connect the react component in which you want to access the data from the redux store
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.
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418433%2fimage-saving-and-accessing-with-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Steps to store something in the redux store
Dispatch an action with the data (your image URL).
Create a reducer and save the data in a store variable.
Connect the react component in which you want to access the data from the redux store
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.
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
add a comment |
Steps to store something in the redux store
Dispatch an action with the data (your image URL).
Create a reducer and save the data in a store variable.
Connect the react component in which you want to access the data from the redux store
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.
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
add a comment |
Steps to store something in the redux store
Dispatch an action with the data (your image URL).
Create a reducer and save the data in a store variable.
Connect the react component in which you want to access the data from the redux store
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.
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
Steps to store something in the redux store
Dispatch an action with the data (your image URL).
Create a reducer and save the data in a store variable.
Connect the react component in which you want to access the data from the redux store
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.
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
answered Nov 21 '18 at 18:52
SirajSiraj
1,61311631
1,61311631
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
add a comment |
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
I need to show the image which url would be entered in the profile form which I already have. My main question is how to get access to the image that would be saved when url entered?
– Arina
Nov 21 '18 at 19:02
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
Simply store the form variables into the redux store and then access those variables in the main page. Sorry, but I think still I didn't get your point :(
– Siraj
Nov 21 '18 at 19:11
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
I've got the first part, but do I do the accessing part for the image? I don't understand how to pass the image variable from profile to main page?
– Arina
Nov 21 '18 at 19:20
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418433%2fimage-saving-and-accessing-with-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
