redux state gets wrapped in another object
I am trying to create a sample app using React Native & Redux. What I am not able to understand is that why my state object is getting wrapped into another object.
I have initial state as {email: 'test'}. I have to access email as this.props.email.email
Why do I have to do this.props.email.email instead of this.props.email
Any help will be appreciated.
Welcome.js
class Welcome extends Component {
render() {
return (
<View style={ styles.container }>
<View style = { styles.inputContainer }>
<Text>{JSON.stringify(this.props.email)}</Text>
<Button title = 'Update Email'
style = { styles.placeButton }
onPress={() => this.props.onChangeEmail('hello')}
/>
</View>
</View>
);
}
}
const mapStateToProps = state => {
return {
email: state.email
}
}
const mapDispatchToProps = dispatch => {
return {
onChangeEmail: (email) => { dispatch({type: 'CHANGE_EMAIL_INPUT', email: email}) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Welcome)
EmailReducer.js
const initialState = {
email: 'test',
};
const emailReducer = (state = initialState, action) => {
switch(action.type) {
case 'CHANGE_EMAIL_INPUT':
return Object.assign({}, state,
{ email: action.email }
);
default:
return state;
}
}
export default emailReducer;
Store.js
import { createStore, combineReducers } from 'redux';
import emailReducer from '../reducers/EmailReducer';
const rootReducer = combineReducers({
email: emailReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
reactjs react-native react-redux
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
|
show 1 more comment
I am trying to create a sample app using React Native & Redux. What I am not able to understand is that why my state object is getting wrapped into another object.
I have initial state as {email: 'test'}. I have to access email as this.props.email.email
Why do I have to do this.props.email.email instead of this.props.email
Any help will be appreciated.
Welcome.js
class Welcome extends Component {
render() {
return (
<View style={ styles.container }>
<View style = { styles.inputContainer }>
<Text>{JSON.stringify(this.props.email)}</Text>
<Button title = 'Update Email'
style = { styles.placeButton }
onPress={() => this.props.onChangeEmail('hello')}
/>
</View>
</View>
);
}
}
const mapStateToProps = state => {
return {
email: state.email
}
}
const mapDispatchToProps = dispatch => {
return {
onChangeEmail: (email) => { dispatch({type: 'CHANGE_EMAIL_INPUT', email: email}) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Welcome)
EmailReducer.js
const initialState = {
email: 'test',
};
const emailReducer = (state = initialState, action) => {
switch(action.type) {
case 'CHANGE_EMAIL_INPUT':
return Object.assign({}, state,
{ email: action.email }
);
default:
return state;
}
}
export default emailReducer;
Store.js
import { createStore, combineReducers } from 'redux';
import emailReducer from '../reducers/EmailReducer';
const rootReducer = combineReducers({
email: emailReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
reactjs react-native react-redux
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
How are you connecting mapStateToProps, mapDispatchToProps and your Welcome component?
– Keilath
Nov 14 '18 at 10:57
Hi @Keilath ,updated the code. i thought there's only one way of connecting so I omitted the connect line.
– Nikhil Gupta
Nov 14 '18 at 11:00
can you share your code where you create the store? usually the name of the reducer becomes the key in the global state object that you access its state from.
– Davin Tryon
Nov 14 '18 at 11:02
That was correct, I think the problem is in the creation of the store. Which reducer are you passing to createStore?
– Keilath
Nov 14 '18 at 11:02
@DavinTryon updated the code for store
– Nikhil Gupta
Nov 14 '18 at 11:05
|
show 1 more comment
I am trying to create a sample app using React Native & Redux. What I am not able to understand is that why my state object is getting wrapped into another object.
I have initial state as {email: 'test'}. I have to access email as this.props.email.email
Why do I have to do this.props.email.email instead of this.props.email
Any help will be appreciated.
Welcome.js
class Welcome extends Component {
render() {
return (
<View style={ styles.container }>
<View style = { styles.inputContainer }>
<Text>{JSON.stringify(this.props.email)}</Text>
<Button title = 'Update Email'
style = { styles.placeButton }
onPress={() => this.props.onChangeEmail('hello')}
/>
</View>
</View>
);
}
}
const mapStateToProps = state => {
return {
email: state.email
}
}
const mapDispatchToProps = dispatch => {
return {
onChangeEmail: (email) => { dispatch({type: 'CHANGE_EMAIL_INPUT', email: email}) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Welcome)
EmailReducer.js
const initialState = {
email: 'test',
};
const emailReducer = (state = initialState, action) => {
switch(action.type) {
case 'CHANGE_EMAIL_INPUT':
return Object.assign({}, state,
{ email: action.email }
);
default:
return state;
}
}
export default emailReducer;
Store.js
import { createStore, combineReducers } from 'redux';
import emailReducer from '../reducers/EmailReducer';
const rootReducer = combineReducers({
email: emailReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
reactjs react-native react-redux
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
I am trying to create a sample app using React Native & Redux. What I am not able to understand is that why my state object is getting wrapped into another object.
I have initial state as {email: 'test'}. I have to access email as this.props.email.email
Why do I have to do this.props.email.email instead of this.props.email
Any help will be appreciated.
Welcome.js
class Welcome extends Component {
render() {
return (
<View style={ styles.container }>
<View style = { styles.inputContainer }>
<Text>{JSON.stringify(this.props.email)}</Text>
<Button title = 'Update Email'
style = { styles.placeButton }
onPress={() => this.props.onChangeEmail('hello')}
/>
</View>
</View>
);
}
}
const mapStateToProps = state => {
return {
email: state.email
}
}
const mapDispatchToProps = dispatch => {
return {
onChangeEmail: (email) => { dispatch({type: 'CHANGE_EMAIL_INPUT', email: email}) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Welcome)
EmailReducer.js
const initialState = {
email: 'test',
};
const emailReducer = (state = initialState, action) => {
switch(action.type) {
case 'CHANGE_EMAIL_INPUT':
return Object.assign({}, state,
{ email: action.email }
);
default:
return state;
}
}
export default emailReducer;
Store.js
import { createStore, combineReducers } from 'redux';
import emailReducer from '../reducers/EmailReducer';
const rootReducer = combineReducers({
email: emailReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
reactjs react-native react-redux
reactjs react-native react-redux
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
edited Dec 2 '18 at 20:41
Daniel Jawna
107213
107213
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
asked Nov 14 '18 at 10:50
Nikhil GuptaNikhil Gupta
3532326
3532326
How are you connecting mapStateToProps, mapDispatchToProps and your Welcome component?
– Keilath
Nov 14 '18 at 10:57
Hi @Keilath ,updated the code. i thought there's only one way of connecting so I omitted the connect line.
– Nikhil Gupta
Nov 14 '18 at 11:00
can you share your code where you create the store? usually the name of the reducer becomes the key in the global state object that you access its state from.
– Davin Tryon
Nov 14 '18 at 11:02
That was correct, I think the problem is in the creation of the store. Which reducer are you passing to createStore?
– Keilath
Nov 14 '18 at 11:02
@DavinTryon updated the code for store
– Nikhil Gupta
Nov 14 '18 at 11:05
|
show 1 more comment
How are you connecting mapStateToProps, mapDispatchToProps and your Welcome component?
– Keilath
Nov 14 '18 at 10:57
Hi @Keilath ,updated the code. i thought there's only one way of connecting so I omitted the connect line.
– Nikhil Gupta
Nov 14 '18 at 11:00
can you share your code where you create the store? usually the name of the reducer becomes the key in the global state object that you access its state from.
– Davin Tryon
Nov 14 '18 at 11:02
That was correct, I think the problem is in the creation of the store. Which reducer are you passing to createStore?
– Keilath
Nov 14 '18 at 11:02
@DavinTryon updated the code for store
– Nikhil Gupta
Nov 14 '18 at 11:05
How are you connecting mapStateToProps, mapDispatchToProps and your Welcome component?
– Keilath
Nov 14 '18 at 10:57
How are you connecting mapStateToProps, mapDispatchToProps and your Welcome component?
– Keilath
Nov 14 '18 at 10:57
Hi @Keilath ,updated the code. i thought there's only one way of connecting so I omitted the connect line.
– Nikhil Gupta
Nov 14 '18 at 11:00
Hi @Keilath ,updated the code. i thought there's only one way of connecting so I omitted the connect line.
– Nikhil Gupta
Nov 14 '18 at 11:00
can you share your code where you create the store? usually the name of the reducer becomes the key in the global state object that you access its state from.
– Davin Tryon
Nov 14 '18 at 11:02
can you share your code where you create the store? usually the name of the reducer becomes the key in the global state object that you access its state from.
– Davin Tryon
Nov 14 '18 at 11:02
That was correct, I think the problem is in the creation of the store. Which reducer are you passing to createStore?
– Keilath
Nov 14 '18 at 11:02
That was correct, I think the problem is in the creation of the store. Which reducer are you passing to createStore?
– Keilath
Nov 14 '18 at 11:02
@DavinTryon updated the code for store
– Nikhil Gupta
Nov 14 '18 at 11:05
@DavinTryon updated the code for store
– Nikhil Gupta
Nov 14 '18 at 11:05
|
show 1 more comment
1 Answer
1
active
oldest
votes
When you call combineReducers you are creating a store with the following shape
{
email: {
email: 'test'
}
}
That is, the keys in the object passed to combineReducers are the root keys of the state object. The initial state for the email reducer is inserted in the key "email" of the state object.
This is the reason why you need to write this.props.email.email: the former is the key in the root state object (that deduced from combineReducers), the latter is the prop of the state part managed by emailReducer
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
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%2f53298448%2fredux-state-gets-wrapped-in-another-object%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
When you call combineReducers you are creating a store with the following shape
{
email: {
email: 'test'
}
}
That is, the keys in the object passed to combineReducers are the root keys of the state object. The initial state for the email reducer is inserted in the key "email" of the state object.
This is the reason why you need to write this.props.email.email: the former is the key in the root state object (that deduced from combineReducers), the latter is the prop of the state part managed by emailReducer
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
add a comment |
When you call combineReducers you are creating a store with the following shape
{
email: {
email: 'test'
}
}
That is, the keys in the object passed to combineReducers are the root keys of the state object. The initial state for the email reducer is inserted in the key "email" of the state object.
This is the reason why you need to write this.props.email.email: the former is the key in the root state object (that deduced from combineReducers), the latter is the prop of the state part managed by emailReducer
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
add a comment |
When you call combineReducers you are creating a store with the following shape
{
email: {
email: 'test'
}
}
That is, the keys in the object passed to combineReducers are the root keys of the state object. The initial state for the email reducer is inserted in the key "email" of the state object.
This is the reason why you need to write this.props.email.email: the former is the key in the root state object (that deduced from combineReducers), the latter is the prop of the state part managed by emailReducer
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
When you call combineReducers you are creating a store with the following shape
{
email: {
email: 'test'
}
}
That is, the keys in the object passed to combineReducers are the root keys of the state object. The initial state for the email reducer is inserted in the key "email" of the state object.
This is the reason why you need to write this.props.email.email: the former is the key in the root state object (that deduced from combineReducers), the latter is the prop of the state part managed by emailReducer
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
answered Nov 14 '18 at 11:20
KeilathKeilath
1635
1635
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%2f53298448%2fredux-state-gets-wrapped-in-another-object%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
How are you connecting mapStateToProps, mapDispatchToProps and your Welcome component?
– Keilath
Nov 14 '18 at 10:57
Hi @Keilath ,updated the code. i thought there's only one way of connecting so I omitted the connect line.
– Nikhil Gupta
Nov 14 '18 at 11:00
can you share your code where you create the store? usually the name of the reducer becomes the key in the global state object that you access its state from.
– Davin Tryon
Nov 14 '18 at 11:02
That was correct, I think the problem is in the creation of the store. Which reducer are you passing to createStore?
– Keilath
Nov 14 '18 at 11:02
@DavinTryon updated the code for store
– Nikhil Gupta
Nov 14 '18 at 11:05