Reducer's not being updated
0
I'm trying to update a property of an object that is nested in an array of my reducer state. The reducer receives the good payload but does not my view does not get updated.
Here's a snippet of what I'm trying to do:
//reducers.js
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id === action.payload.id);
return {
...state,
rooms: state.config.rooms.map(
(room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room
)
}
}
Here is the structure of the reducer state:
config: {
...
rooms: [
{
...,
tmp: 22
}
]
}
The action to update the reducer:
export const updateRoomTmp = ({ targetTmp, roomId }) => {
return {
type: UPDATE_ROOM_TMP,
payload: { targetTmp, roomId },
};
};
The function that calls the action:
increaseTmp = () => {
const tmp = this.props.config.rooms[this.roomIndex].targetTmp + 1
this.props.updateRoomTmp({targetTmp: tmp, roomId: this.props.room.id});
}
The Text that presents the new value
<Text>{this.props.config.rooms[this.roomIndex].targetTmp}</Text>
How I connect to config:
const mapStateToProp = ({ allConfig }, props) => {
const { config } = allConfig;
return { config };
};
So the problem is that when increaseTmp is called, the reducer receives the good payload but never get updated, so the text does not get updated either.
reactjs react-native redux react-redux immutability
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
add a comment |
0
I'm trying to update a property of an object that is nested in an array of my reducer state. The reducer receives the good payload but does not my view does not get updated.
Here's a snippet of what I'm trying to do:
//reducers.js
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id === action.payload.id);
return {
...state,
rooms: state.config.rooms.map(
(room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room
)
}
}
Here is the structure of the reducer state:
config: {
...
rooms: [
{
...,
tmp: 22
}
]
}
The action to update the reducer:
export const updateRoomTmp = ({ targetTmp, roomId }) => {
return {
type: UPDATE_ROOM_TMP,
payload: { targetTmp, roomId },
};
};
The function that calls the action:
increaseTmp = () => {
const tmp = this.props.config.rooms[this.roomIndex].targetTmp + 1
this.props.updateRoomTmp({targetTmp: tmp, roomId: this.props.room.id});
}
The Text that presents the new value
<Text>{this.props.config.rooms[this.roomIndex].targetTmp}</Text>
How I connect to config:
const mapStateToProp = ({ allConfig }, props) => {
const { config } = allConfig;
return { config };
};
So the problem is that when increaseTmp is called, the reducer receives the good payload but never get updated, so the text does not get updated either.
reactjs react-native redux react-redux immutability
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
This type of issue can often be solved with a couple of console logs. In your reducer, log what you are about to return from the function. InmapStateToProps, log the state. UseJSON.stringify()orutil.inspect()to show you the entire content of those two objects. This will tell you if your reducer shape matches the expected state shape.
– stone
Nov 15 '18 at 6:16
I've done many console.logs, I don't see any problem, Actually if there was a shape matching problem I would've got an error. That's why I can't spot the problem
– rn-dev
Nov 15 '18 at 6:31
Hmm, well one of two things is true. 1) The props being received by your component are incorrect. 2) The state being received by mapStateToProps is not what you expect. If you don't have problem (2), but you do have problem (1), then either your mapStateToProps isn't working right (doesn't pull out the right data from state), or it isn't being called/isn't connected to the component. Console loggingthis.propsat the top of yourrendermethod will tell you when you get new props and what they are. Console loggingmapStateToPropswill tell you when it is being called.
– stone
Nov 16 '18 at 0:10
One easy mistake to make (which I do all the time) is to forget to use the connected container component and instead import the view component. But in that case mapStateToProps would never be called at all.
– stone
Nov 16 '18 at 0:12
add a comment |
0
0
0
I'm trying to update a property of an object that is nested in an array of my reducer state. The reducer receives the good payload but does not my view does not get updated.
Here's a snippet of what I'm trying to do:
//reducers.js
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id === action.payload.id);
return {
...state,
rooms: state.config.rooms.map(
(room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room
)
}
}
Here is the structure of the reducer state:
config: {
...
rooms: [
{
...,
tmp: 22
}
]
}
The action to update the reducer:
export const updateRoomTmp = ({ targetTmp, roomId }) => {
return {
type: UPDATE_ROOM_TMP,
payload: { targetTmp, roomId },
};
};
The function that calls the action:
increaseTmp = () => {
const tmp = this.props.config.rooms[this.roomIndex].targetTmp + 1
this.props.updateRoomTmp({targetTmp: tmp, roomId: this.props.room.id});
}
The Text that presents the new value
<Text>{this.props.config.rooms[this.roomIndex].targetTmp}</Text>
How I connect to config:
const mapStateToProp = ({ allConfig }, props) => {
const { config } = allConfig;
return { config };
};
So the problem is that when increaseTmp is called, the reducer receives the good payload but never get updated, so the text does not get updated either.
reactjs react-native redux react-redux immutability
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
I'm trying to update a property of an object that is nested in an array of my reducer state. The reducer receives the good payload but does not my view does not get updated.
Here's a snippet of what I'm trying to do:
//reducers.js
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id === action.payload.id);
return {
...state,
rooms: state.config.rooms.map(
(room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room
)
}
}
Here is the structure of the reducer state:
config: {
...
rooms: [
{
...,
tmp: 22
}
]
}
The action to update the reducer:
export const updateRoomTmp = ({ targetTmp, roomId }) => {
return {
type: UPDATE_ROOM_TMP,
payload: { targetTmp, roomId },
};
};
The function that calls the action:
increaseTmp = () => {
const tmp = this.props.config.rooms[this.roomIndex].targetTmp + 1
this.props.updateRoomTmp({targetTmp: tmp, roomId: this.props.room.id});
}
The Text that presents the new value
<Text>{this.props.config.rooms[this.roomIndex].targetTmp}</Text>
How I connect to config:
const mapStateToProp = ({ allConfig }, props) => {
const { config } = allConfig;
return { config };
};
So the problem is that when increaseTmp is called, the reducer receives the good payload but never get updated, so the text does not get updated either.
reactjs react-native redux react-redux immutability
reactjs react-native redux react-redux immutability
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
asked Nov 15 '18 at 5:05
rn-devrn-dev
12
12
This type of issue can often be solved with a couple of console logs. In your reducer, log what you are about to return from the function. InmapStateToProps, log the state. UseJSON.stringify()orutil.inspect()to show you the entire content of those two objects. This will tell you if your reducer shape matches the expected state shape.
– stone
Nov 15 '18 at 6:16
I've done many console.logs, I don't see any problem, Actually if there was a shape matching problem I would've got an error. That's why I can't spot the problem
– rn-dev
Nov 15 '18 at 6:31
Hmm, well one of two things is true. 1) The props being received by your component are incorrect. 2) The state being received by mapStateToProps is not what you expect. If you don't have problem (2), but you do have problem (1), then either your mapStateToProps isn't working right (doesn't pull out the right data from state), or it isn't being called/isn't connected to the component. Console loggingthis.propsat the top of yourrendermethod will tell you when you get new props and what they are. Console loggingmapStateToPropswill tell you when it is being called.
– stone
Nov 16 '18 at 0:10
One easy mistake to make (which I do all the time) is to forget to use the connected container component and instead import the view component. But in that case mapStateToProps would never be called at all.
– stone
Nov 16 '18 at 0:12
add a comment |
This type of issue can often be solved with a couple of console logs. In your reducer, log what you are about to return from the function. InmapStateToProps, log the state. UseJSON.stringify()orutil.inspect()to show you the entire content of those two objects. This will tell you if your reducer shape matches the expected state shape.
– stone
Nov 15 '18 at 6:16
I've done many console.logs, I don't see any problem, Actually if there was a shape matching problem I would've got an error. That's why I can't spot the problem
– rn-dev
Nov 15 '18 at 6:31
Hmm, well one of two things is true. 1) The props being received by your component are incorrect. 2) The state being received by mapStateToProps is not what you expect. If you don't have problem (2), but you do have problem (1), then either your mapStateToProps isn't working right (doesn't pull out the right data from state), or it isn't being called/isn't connected to the component. Console loggingthis.propsat the top of yourrendermethod will tell you when you get new props and what they are. Console loggingmapStateToPropswill tell you when it is being called.
– stone
Nov 16 '18 at 0:10
One easy mistake to make (which I do all the time) is to forget to use the connected container component and instead import the view component. But in that case mapStateToProps would never be called at all.
– stone
Nov 16 '18 at 0:12
This type of issue can often be solved with a couple of console logs. In your reducer, log what you are about to return from the function. In
mapStateToProps, log the state. Use JSON.stringify() or util.inspect() to show you the entire content of those two objects. This will tell you if your reducer shape matches the expected state shape.– stone
Nov 15 '18 at 6:16
This type of issue can often be solved with a couple of console logs. In your reducer, log what you are about to return from the function. In
mapStateToProps, log the state. Use JSON.stringify() or util.inspect() to show you the entire content of those two objects. This will tell you if your reducer shape matches the expected state shape.– stone
Nov 15 '18 at 6:16
I've done many console.logs, I don't see any problem, Actually if there was a shape matching problem I would've got an error. That's why I can't spot the problem
– rn-dev
Nov 15 '18 at 6:31
I've done many console.logs, I don't see any problem, Actually if there was a shape matching problem I would've got an error. That's why I can't spot the problem
– rn-dev
Nov 15 '18 at 6:31
Hmm, well one of two things is true. 1) The props being received by your component are incorrect. 2) The state being received by mapStateToProps is not what you expect. If you don't have problem (2), but you do have problem (1), then either your mapStateToProps isn't working right (doesn't pull out the right data from state), or it isn't being called/isn't connected to the component. Console logging
this.props at the top of your render method will tell you when you get new props and what they are. Console logging mapStateToProps will tell you when it is being called.– stone
Nov 16 '18 at 0:10
Hmm, well one of two things is true. 1) The props being received by your component are incorrect. 2) The state being received by mapStateToProps is not what you expect. If you don't have problem (2), but you do have problem (1), then either your mapStateToProps isn't working right (doesn't pull out the right data from state), or it isn't being called/isn't connected to the component. Console logging
this.props at the top of your render method will tell you when you get new props and what they are. Console logging mapStateToProps will tell you when it is being called.– stone
Nov 16 '18 at 0:10
One easy mistake to make (which I do all the time) is to forget to use the connected container component and instead import the view component. But in that case mapStateToProps would never be called at all.
– stone
Nov 16 '18 at 0:12
One easy mistake to make (which I do all the time) is to forget to use the connected container component and instead import the view component. But in that case mapStateToProps would never be called at all.
– stone
Nov 16 '18 at 0:12
add a comment |
1 Answer
1
active
oldest
votes
0
Try changing reducers.js like,
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id ===action.payload.id);
return {
...state,
config:{
...config,
rooms: state.config.rooms.map( (room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room)
}
}
}
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
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
});
}
});
draft saved
draft discarded
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%2f53312759%2freducers-not-being-updated%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
0
Try changing reducers.js like,
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id ===action.payload.id);
return {
...state,
config:{
...config,
rooms: state.config.rooms.map( (room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room)
}
}
}
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
add a comment |
0
Try changing reducers.js like,
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id ===action.payload.id);
return {
...state,
config:{
...config,
rooms: state.config.rooms.map( (room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room)
}
}
}
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
add a comment |
0
0
0
Try changing reducers.js like,
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id ===action.payload.id);
return {
...state,
config:{
...config,
rooms: state.config.rooms.map( (room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room)
}
}
}
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
Try changing reducers.js like,
case UPDATE_ROOM_TMP: {
const roomIndex = state.config.rooms.findIndex(room => room.id ===action.payload.id);
return {
...state,
config:{
...config,
rooms: state.config.rooms.map( (room, i) => i === roomIndex ? { ...room, tmp : action.payload.tmp} : room)
}
}
}
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
answered Nov 15 '18 at 5:20
Arjun srArjun sr
353
353
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
add a comment |
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
Ok trying this right now
– rn-dev
Nov 15 '18 at 5:23
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
getting config is not defined tryna figure out why
– rn-dev
Nov 15 '18 at 5:27
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
Thank you for your time but it doesn't work
– rn-dev
Nov 15 '18 at 5:34
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53312759%2freducers-not-being-updated%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
This type of issue can often be solved with a couple of console logs. In your reducer, log what you are about to return from the function. In
mapStateToProps, log the state. UseJSON.stringify()orutil.inspect()to show you the entire content of those two objects. This will tell you if your reducer shape matches the expected state shape.– stone
Nov 15 '18 at 6:16
I've done many console.logs, I don't see any problem, Actually if there was a shape matching problem I would've got an error. That's why I can't spot the problem
– rn-dev
Nov 15 '18 at 6:31
Hmm, well one of two things is true. 1) The props being received by your component are incorrect. 2) The state being received by mapStateToProps is not what you expect. If you don't have problem (2), but you do have problem (1), then either your mapStateToProps isn't working right (doesn't pull out the right data from state), or it isn't being called/isn't connected to the component. Console logging
this.propsat the top of yourrendermethod will tell you when you get new props and what they are. Console loggingmapStateToPropswill tell you when it is being called.– stone
Nov 16 '18 at 0:10
One easy mistake to make (which I do all the time) is to forget to use the connected container component and instead import the view component. But in that case mapStateToProps would never be called at all.
– stone
Nov 16 '18 at 0:12