Mixing
Changing the storage in Redux
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I need to change the "global" state of Redux (I believe it's called storage). This is my code:
reducer
export const user = (state = {}, action) => {
console.log(4);
console.log(action.type)
console.log(action.payload)
switch (action.type) {
case C.SET_USER:
console.log(action.payload);
return action.payload;
case C.CLEAR_USER:
return action.payload;
default:
return state;
}
};
Action:
export const setUser = (user = {}) => {
console.log(user);
return {
type: C.SET_USER,
payload: user,
}
};
Calling the action:
const user = {test:true};
setUser(this.state.user);
But if I run this code, it fails and doesn't call the reducer. It calls the action, but not the reducer. What am I missing?
My current app.js code:
export default class App extends Component {
constructor(p) {
super(p);
this.state = {user: null};
}
setUser = () => {
const {uid} = firebase.auth().currentUser;
firebase.database().ref('Users').child(uid).on('value', r => {
const user = r.val();
this.setState({user: user});
console.log(this.state.user);
setUser(this.state.user);
});
};
componentWillMount() {
if (firebase.auth().currentUser) {
this.setUser();
}
firebase.auth().onAuthStateChanged(async () => {
console.log('authChanged');
if (!firebase.auth().currentUser) {
return null;
}
this.setUser();
});
}
render() {
return (
<div className="App">
<Nav/>
</div>
);
}
}
javascript reactjs redux react-redux
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
|
show 3 more comments
I need to change the "global" state of Redux (I believe it's called storage). This is my code:
reducer
export const user = (state = {}, action) => {
console.log(4);
console.log(action.type)
console.log(action.payload)
switch (action.type) {
case C.SET_USER:
console.log(action.payload);
return action.payload;
case C.CLEAR_USER:
return action.payload;
default:
return state;
}
};
Action:
export const setUser = (user = {}) => {
console.log(user);
return {
type: C.SET_USER,
payload: user,
}
};
Calling the action:
const user = {test:true};
setUser(this.state.user);
But if I run this code, it fails and doesn't call the reducer. It calls the action, but not the reducer. What am I missing?
My current app.js code:
export default class App extends Component {
constructor(p) {
super(p);
this.state = {user: null};
}
setUser = () => {
const {uid} = firebase.auth().currentUser;
firebase.database().ref('Users').child(uid).on('value', r => {
const user = r.val();
this.setState({user: user});
console.log(this.state.user);
setUser(this.state.user);
});
};
componentWillMount() {
if (firebase.auth().currentUser) {
this.setUser();
}
firebase.auth().onAuthStateChanged(async () => {
console.log('authChanged');
if (!firebase.auth().currentUser) {
return null;
}
this.setUser();
});
}
render() {
return (
<div className="App">
<Nav/>
</div>
);
}
}
javascript reactjs redux react-redux
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
Share the code which connect the state and props of the component using redux. I think you missed out call the action via props function.
– kumar k
Jan 3 at 14:20
where is your state? you callsetUser( data from state), can you show us the state, or you have pass wrong user? insteadconst user = {test:true}; you call some from state(maybe undefined)
– ivica.moke
Jan 3 at 14:22
@kumark You are right. My parent component is still in the "React" form. But I need theComponentWillMountelement for the app to work. Is there a replacement for it in Redux?
– Alex Ironside
Jan 3 at 14:22
@ivica.moke The console doesn't log anything. It's not being called
– Alex Ironside
Jan 3 at 14:23
have you dispatch it?
– ivica.moke
Jan 3 at 14:25
|
show 3 more comments
I need to change the "global" state of Redux (I believe it's called storage). This is my code:
reducer
export const user = (state = {}, action) => {
console.log(4);
console.log(action.type)
console.log(action.payload)
switch (action.type) {
case C.SET_USER:
console.log(action.payload);
return action.payload;
case C.CLEAR_USER:
return action.payload;
default:
return state;
}
};
Action:
export const setUser = (user = {}) => {
console.log(user);
return {
type: C.SET_USER,
payload: user,
}
};
Calling the action:
const user = {test:true};
setUser(this.state.user);
But if I run this code, it fails and doesn't call the reducer. It calls the action, but not the reducer. What am I missing?
My current app.js code:
export default class App extends Component {
constructor(p) {
super(p);
this.state = {user: null};
}
setUser = () => {
const {uid} = firebase.auth().currentUser;
firebase.database().ref('Users').child(uid).on('value', r => {
const user = r.val();
this.setState({user: user});
console.log(this.state.user);
setUser(this.state.user);
});
};
componentWillMount() {
if (firebase.auth().currentUser) {
this.setUser();
}
firebase.auth().onAuthStateChanged(async () => {
console.log('authChanged');
if (!firebase.auth().currentUser) {
return null;
}
this.setUser();
});
}
render() {
return (
<div className="App">
<Nav/>
</div>
);
}
}
javascript reactjs redux react-redux
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
I need to change the "global" state of Redux (I believe it's called storage). This is my code:
reducer
export const user = (state = {}, action) => {
console.log(4);
console.log(action.type)
console.log(action.payload)
switch (action.type) {
case C.SET_USER:
console.log(action.payload);
return action.payload;
case C.CLEAR_USER:
return action.payload;
default:
return state;
}
};
Action:
export const setUser = (user = {}) => {
console.log(user);
return {
type: C.SET_USER,
payload: user,
}
};
Calling the action:
const user = {test:true};
setUser(this.state.user);
But if I run this code, it fails and doesn't call the reducer. It calls the action, but not the reducer. What am I missing?
My current app.js code:
export default class App extends Component {
constructor(p) {
super(p);
this.state = {user: null};
}
setUser = () => {
const {uid} = firebase.auth().currentUser;
firebase.database().ref('Users').child(uid).on('value', r => {
const user = r.val();
this.setState({user: user});
console.log(this.state.user);
setUser(this.state.user);
});
};
componentWillMount() {
if (firebase.auth().currentUser) {
this.setUser();
}
firebase.auth().onAuthStateChanged(async () => {
console.log('authChanged');
if (!firebase.auth().currentUser) {
return null;
}
this.setUser();
});
}
render() {
return (
<div className="App">
<Nav/>
</div>
);
}
}
javascript reactjs redux react-redux
javascript reactjs redux react-redux
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
edited Jan 3 at 14:27
Alex Ironside
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
asked Jan 3 at 14:15
Alex IronsideAlex Ironside
1,096830
1,096830
Share the code which connect the state and props of the component using redux. I think you missed out call the action via props function.
– kumar k
Jan 3 at 14:20
where is your state? you callsetUser( data from state), can you show us the state, or you have pass wrong user? insteadconst user = {test:true}; you call some from state(maybe undefined)
– ivica.moke
Jan 3 at 14:22
@kumark You are right. My parent component is still in the "React" form. But I need theComponentWillMountelement for the app to work. Is there a replacement for it in Redux?
– Alex Ironside
Jan 3 at 14:22
@ivica.moke The console doesn't log anything. It's not being called
– Alex Ironside
Jan 3 at 14:23
have you dispatch it?
– ivica.moke
Jan 3 at 14:25
|
show 3 more comments
Share the code which connect the state and props of the component using redux. I think you missed out call the action via props function.
– kumar k
Jan 3 at 14:20
where is your state? you callsetUser( data from state), can you show us the state, or you have pass wrong user? insteadconst user = {test:true}; you call some from state(maybe undefined)
– ivica.moke
Jan 3 at 14:22
@kumark You are right. My parent component is still in the "React" form. But I need theComponentWillMountelement for the app to work. Is there a replacement for it in Redux?
– Alex Ironside
Jan 3 at 14:22
@ivica.moke The console doesn't log anything. It's not being called
– Alex Ironside
Jan 3 at 14:23
have you dispatch it?
– ivica.moke
Jan 3 at 14:25
Share the code which connect the state and props of the component using redux. I think you missed out call the action via props function.
– kumar k
Jan 3 at 14:20
Share the code which connect the state and props of the component using redux. I think you missed out call the action via props function.
– kumar k
Jan 3 at 14:20
where is your state? you call
setUser( data from state), can you show us the state, or you have pass wrong user? instead const user = {test:true}; you call some from state(maybe undefined) – ivica.moke
Jan 3 at 14:22
where is your state? you call
setUser( data from state), can you show us the state, or you have pass wrong user? instead const user = {test:true}; you call some from state(maybe undefined) – ivica.moke
Jan 3 at 14:22
@kumark You are right. My parent component is still in the "React" form. But I need the
ComponentWillMount element for the app to work. Is there a replacement for it in Redux?– Alex Ironside
Jan 3 at 14:22
@kumark You are right. My parent component is still in the "React" form. But I need the
ComponentWillMount element for the app to work. Is there a replacement for it in Redux?– Alex Ironside
Jan 3 at 14:22
@ivica.moke The console doesn't log anything. It's not being called
– Alex Ironside
Jan 3 at 14:23
@ivica.moke The console doesn't log anything. It's not being called
– Alex Ironside
Jan 3 at 14:23
have you dispatch it?
– ivica.moke
Jan 3 at 14:25
have you dispatch it?
– ivica.moke
Jan 3 at 14:25
|
show 3 more comments
3 Answers
3
active
oldest
votes
setUser have to be dispatched and not simply called:
store.dispatch(setUser(user));
But that's not really the react way, you'd better use mapDispatchToProps in your connect function to dispatch actions directly from component props. Something along the lines of:
import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
// ...
someMethod() {
this.props.setUser(user);
}
}
export default connect(
null,
({setUser: setUser})
)(UserComponent);
This allows your React component to be linked to your Redux store in an optimized and bug-free way. That's also the way most developer use, so you're likely to find a lot of docs on this.
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
Thestore.dispatch(setUser(user));worked for me. The more correct version did not though.
– Alex Ironside
Jan 3 at 14:44
add a comment |
Example: Your connected Component where you want to use your setUser action with redux
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setUser} from '../../actions';
class YourComponent extends Component {
render(){
// now your redux action is passed to component as prop
// and you can use it like
this.props.setUser(some-user);
return()
}
}
export default connect(null, {setUser})(YourComponent);
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
add a comment |
first of all you have to dispatch action to change the state , second you have to connect your component to the store
to connect your component to the store
...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
...
}
export default connect((store) => ({...}))
when you connect your component to the store you will have access to dispatch function in the props
to dispatch action do this :
this.props.dispatch(setUser());
I believe it's called storage
BTW it called store
answered Jan 3 at 14:48
AliAli
6,55231735
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%2f54024046%2fchanging-the-storage-in-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
setUser have to be dispatched and not simply called:
store.dispatch(setUser(user));
But that's not really the react way, you'd better use mapDispatchToProps in your connect function to dispatch actions directly from component props. Something along the lines of:
import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
// ...
someMethod() {
this.props.setUser(user);
}
}
export default connect(
null,
({setUser: setUser})
)(UserComponent);
This allows your React component to be linked to your Redux store in an optimized and bug-free way. That's also the way most developer use, so you're likely to find a lot of docs on this.
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
Thestore.dispatch(setUser(user));worked for me. The more correct version did not though.
– Alex Ironside
Jan 3 at 14:44
add a comment |
setUser have to be dispatched and not simply called:
store.dispatch(setUser(user));
But that's not really the react way, you'd better use mapDispatchToProps in your connect function to dispatch actions directly from component props. Something along the lines of:
import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
// ...
someMethod() {
this.props.setUser(user);
}
}
export default connect(
null,
({setUser: setUser})
)(UserComponent);
This allows your React component to be linked to your Redux store in an optimized and bug-free way. That's also the way most developer use, so you're likely to find a lot of docs on this.
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
Thestore.dispatch(setUser(user));worked for me. The more correct version did not though.
– Alex Ironside
Jan 3 at 14:44
add a comment |
setUser have to be dispatched and not simply called:
store.dispatch(setUser(user));
But that's not really the react way, you'd better use mapDispatchToProps in your connect function to dispatch actions directly from component props. Something along the lines of:
import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
// ...
someMethod() {
this.props.setUser(user);
}
}
export default connect(
null,
({setUser: setUser})
)(UserComponent);
This allows your React component to be linked to your Redux store in an optimized and bug-free way. That's also the way most developer use, so you're likely to find a lot of docs on this.
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
setUser have to be dispatched and not simply called:
store.dispatch(setUser(user));
But that's not really the react way, you'd better use mapDispatchToProps in your connect function to dispatch actions directly from component props. Something along the lines of:
import { setUser } from 'store/user';
// ...
class UserComponent extends React.Component {
// ...
someMethod() {
this.props.setUser(user);
}
}
export default connect(
null,
({setUser: setUser})
)(UserComponent);
This allows your React component to be linked to your Redux store in an optimized and bug-free way. That's also the way most developer use, so you're likely to find a lot of docs on this.
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
answered Jan 3 at 14:31
Nino FiliuNino Filiu
3,21841531
3,21841531
Thestore.dispatch(setUser(user));worked for me. The more correct version did not though.
– Alex Ironside
Jan 3 at 14:44
add a comment |
Thestore.dispatch(setUser(user));worked for me. The more correct version did not though.
– Alex Ironside
Jan 3 at 14:44
The
store.dispatch(setUser(user)); worked for me. The more correct version did not though.– Alex Ironside
Jan 3 at 14:44
The
store.dispatch(setUser(user)); worked for me. The more correct version did not though.– Alex Ironside
Jan 3 at 14:44
add a comment |
Example: Your connected Component where you want to use your setUser action with redux
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setUser} from '../../actions';
class YourComponent extends Component {
render(){
// now your redux action is passed to component as prop
// and you can use it like
this.props.setUser(some-user);
return()
}
}
export default connect(null, {setUser})(YourComponent);
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
add a comment |
Example: Your connected Component where you want to use your setUser action with redux
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setUser} from '../../actions';
class YourComponent extends Component {
render(){
// now your redux action is passed to component as prop
// and you can use it like
this.props.setUser(some-user);
return()
}
}
export default connect(null, {setUser})(YourComponent);
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
add a comment |
Example: Your connected Component where you want to use your setUser action with redux
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setUser} from '../../actions';
class YourComponent extends Component {
render(){
// now your redux action is passed to component as prop
// and you can use it like
this.props.setUser(some-user);
return()
}
}
export default connect(null, {setUser})(YourComponent);
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
Example: Your connected Component where you want to use your setUser action with redux
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setUser} from '../../actions';
class YourComponent extends Component {
render(){
// now your redux action is passed to component as prop
// and you can use it like
this.props.setUser(some-user);
return()
}
}
export default connect(null, {setUser})(YourComponent);
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
answered Jan 3 at 14:32
ivica.mokeivica.moke
7531614
7531614
add a comment |
add a comment |
first of all you have to dispatch action to change the state , second you have to connect your component to the store
to connect your component to the store
...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
...
}
export default connect((store) => ({...}))
when you connect your component to the store you will have access to dispatch function in the props
to dispatch action do this :
this.props.dispatch(setUser());
I believe it's called storage
BTW it called store
answered Jan 3 at 14:48
AliAli
6,55231735
add a comment |
first of all you have to dispatch action to change the state , second you have to connect your component to the store
to connect your component to the store
...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
...
}
export default connect((store) => ({...}))
when you connect your component to the store you will have access to dispatch function in the props
to dispatch action do this :
this.props.dispatch(setUser());
I believe it's called storage
BTW it called store
answered Jan 3 at 14:48
AliAli
6,55231735
add a comment |
first of all you have to dispatch action to change the state , second you have to connect your component to the store
to connect your component to the store
...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
...
}
export default connect((store) => ({...}))
when you connect your component to the store you will have access to dispatch function in the props
to dispatch action do this :
this.props.dispatch(setUser());
I believe it's called storage
BTW it called store
answered Jan 3 at 14:48
AliAli
6,55231735
first of all you have to dispatch action to change the state , second you have to connect your component to the store
to connect your component to the store
...
import { connect } from 'react-redux';
class MyComponent extends React.Component {
...
}
export default connect((store) => ({...}))
when you connect your component to the store you will have access to dispatch function in the props
to dispatch action do this :
this.props.dispatch(setUser());
I believe it's called storage
BTW it called store
answered Jan 3 at 14:48
AliAli
6,55231735
answered Jan 3 at 14:48
AliAli
6,55231735
answered Jan 3 at 14:48
AliAli
6,55231735
answered Jan 3 at 14:48
AliAli
6,55231735
6,55231735
add a comment |
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%2f54024046%2fchanging-the-storage-in-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
Share the code which connect the state and props of the component using redux. I think you missed out call the action via props function.
– kumar k
Jan 3 at 14:20
where is your state? you call
setUser( data from state), can you show us the state, or you have pass wrong user? insteadconst user = {test:true}; you call some from state(maybe undefined)– ivica.moke
Jan 3 at 14:22
@kumark You are right. My parent component is still in the "React" form. But I need the
ComponentWillMountelement for the app to work. Is there a replacement for it in Redux?– Alex Ironside
Jan 3 at 14:22
@ivica.moke The console doesn't log anything. It's not being called
– Alex Ironside
Jan 3 at 14:23
have you dispatch it?
– ivica.moke
Jan 3 at 14:25