mapStateToProps not updating component on change
New to react/redux. Wondering why my component is not refreshing on the fired action. Also not sure whether reducer is a good place to manipulate the store but it is pure so it should work.
What happens is that action is fired and store is updated. But the clicked item is not updating (props update shoud add class added
to it)
Component:
Referencing rcm_data by Id to toggle class added
, onClick fire action
import React, { Component } from "react";
import { connect } from "react-redux";
import { addRateCard } from "../actions";
import "./RcmEditor.css";
class RcmEditor extends Component {
constructor(props) {
super(props);
}
render() {
return (
<table className="slds-table slds-table--cell-buffer slds-table--bordered">
<thead>
<tr>
<th>Rate Card Name</th>
</tr>
</thead>
<tbody>
{group.rateCardIds.map(rcId => {
return (
<tr
className={
"ed-group-rc " +
(this.props.rcm_data[rcId].added ? "added" : "")
}
key={rcId}
onClick={() =>
this.props.addRateCard(this.props.rcm_data[rcId])
}
>
<td colSpan="100">{this.props.rcm_data[rcId].Name}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const mapDispatchToProps = {
addRateCard
};
const mapStateToProps = state => {
return { rcm_data: state.rcm_data, group_data: state.group_data };
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(RcmEditor);
Actions:
const ADD_RATE_CARD = "ADD_RATE_CARD";
export const addRateCard = rateCard => ({ type: ADD_RATE_CARD, payload: rateCard });
Reducer:
Copy state (just a precaution), increment added_count property of group_data and change added property of rcm_data referenced by action. payload Id, return a new state. Everything seems pure here
const initialState = {
rcm_data: {},
group_data: {},
};
const rootReducer = (state = initialState, action) => {
case "ADD_RATE_CARD":
let _state = { ...state };
let rateCard = action.payload;
_state.group_data[rateCard.GroupName].added_count++;
_state.rcm_data[rateCard.Id].added = true;
let data = {
rcm_data: _state.rcm_data,
group_data: _state.group_data
};
return { ...state, rcm_data: _state.rcm_data, group_data: _state.group_data };
default:
return state;
}
};
export default rootReducer;
javascript reactjs redux
add a comment |
New to react/redux. Wondering why my component is not refreshing on the fired action. Also not sure whether reducer is a good place to manipulate the store but it is pure so it should work.
What happens is that action is fired and store is updated. But the clicked item is not updating (props update shoud add class added
to it)
Component:
Referencing rcm_data by Id to toggle class added
, onClick fire action
import React, { Component } from "react";
import { connect } from "react-redux";
import { addRateCard } from "../actions";
import "./RcmEditor.css";
class RcmEditor extends Component {
constructor(props) {
super(props);
}
render() {
return (
<table className="slds-table slds-table--cell-buffer slds-table--bordered">
<thead>
<tr>
<th>Rate Card Name</th>
</tr>
</thead>
<tbody>
{group.rateCardIds.map(rcId => {
return (
<tr
className={
"ed-group-rc " +
(this.props.rcm_data[rcId].added ? "added" : "")
}
key={rcId}
onClick={() =>
this.props.addRateCard(this.props.rcm_data[rcId])
}
>
<td colSpan="100">{this.props.rcm_data[rcId].Name}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const mapDispatchToProps = {
addRateCard
};
const mapStateToProps = state => {
return { rcm_data: state.rcm_data, group_data: state.group_data };
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(RcmEditor);
Actions:
const ADD_RATE_CARD = "ADD_RATE_CARD";
export const addRateCard = rateCard => ({ type: ADD_RATE_CARD, payload: rateCard });
Reducer:
Copy state (just a precaution), increment added_count property of group_data and change added property of rcm_data referenced by action. payload Id, return a new state. Everything seems pure here
const initialState = {
rcm_data: {},
group_data: {},
};
const rootReducer = (state = initialState, action) => {
case "ADD_RATE_CARD":
let _state = { ...state };
let rateCard = action.payload;
_state.group_data[rateCard.GroupName].added_count++;
_state.rcm_data[rateCard.Id].added = true;
let data = {
rcm_data: _state.rcm_data,
group_data: _state.group_data
};
return { ...state, rcm_data: _state.rcm_data, group_data: _state.group_data };
default:
return state;
}
};
export default rootReducer;
javascript reactjs redux
not sure whether reducer is a good place to manipulate store
. I personally prefer that logic should go in actions and reducer should only give new state. You can use redux-thunk in your actions to add logic
– Ajay Gaur
Nov 23 '18 at 13:25
I tought that accessing store in action creators is not best practice
– CountGradsky
Nov 23 '18 at 13:28
add a comment |
New to react/redux. Wondering why my component is not refreshing on the fired action. Also not sure whether reducer is a good place to manipulate the store but it is pure so it should work.
What happens is that action is fired and store is updated. But the clicked item is not updating (props update shoud add class added
to it)
Component:
Referencing rcm_data by Id to toggle class added
, onClick fire action
import React, { Component } from "react";
import { connect } from "react-redux";
import { addRateCard } from "../actions";
import "./RcmEditor.css";
class RcmEditor extends Component {
constructor(props) {
super(props);
}
render() {
return (
<table className="slds-table slds-table--cell-buffer slds-table--bordered">
<thead>
<tr>
<th>Rate Card Name</th>
</tr>
</thead>
<tbody>
{group.rateCardIds.map(rcId => {
return (
<tr
className={
"ed-group-rc " +
(this.props.rcm_data[rcId].added ? "added" : "")
}
key={rcId}
onClick={() =>
this.props.addRateCard(this.props.rcm_data[rcId])
}
>
<td colSpan="100">{this.props.rcm_data[rcId].Name}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const mapDispatchToProps = {
addRateCard
};
const mapStateToProps = state => {
return { rcm_data: state.rcm_data, group_data: state.group_data };
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(RcmEditor);
Actions:
const ADD_RATE_CARD = "ADD_RATE_CARD";
export const addRateCard = rateCard => ({ type: ADD_RATE_CARD, payload: rateCard });
Reducer:
Copy state (just a precaution), increment added_count property of group_data and change added property of rcm_data referenced by action. payload Id, return a new state. Everything seems pure here
const initialState = {
rcm_data: {},
group_data: {},
};
const rootReducer = (state = initialState, action) => {
case "ADD_RATE_CARD":
let _state = { ...state };
let rateCard = action.payload;
_state.group_data[rateCard.GroupName].added_count++;
_state.rcm_data[rateCard.Id].added = true;
let data = {
rcm_data: _state.rcm_data,
group_data: _state.group_data
};
return { ...state, rcm_data: _state.rcm_data, group_data: _state.group_data };
default:
return state;
}
};
export default rootReducer;
javascript reactjs redux
New to react/redux. Wondering why my component is not refreshing on the fired action. Also not sure whether reducer is a good place to manipulate the store but it is pure so it should work.
What happens is that action is fired and store is updated. But the clicked item is not updating (props update shoud add class added
to it)
Component:
Referencing rcm_data by Id to toggle class added
, onClick fire action
import React, { Component } from "react";
import { connect } from "react-redux";
import { addRateCard } from "../actions";
import "./RcmEditor.css";
class RcmEditor extends Component {
constructor(props) {
super(props);
}
render() {
return (
<table className="slds-table slds-table--cell-buffer slds-table--bordered">
<thead>
<tr>
<th>Rate Card Name</th>
</tr>
</thead>
<tbody>
{group.rateCardIds.map(rcId => {
return (
<tr
className={
"ed-group-rc " +
(this.props.rcm_data[rcId].added ? "added" : "")
}
key={rcId}
onClick={() =>
this.props.addRateCard(this.props.rcm_data[rcId])
}
>
<td colSpan="100">{this.props.rcm_data[rcId].Name}</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const mapDispatchToProps = {
addRateCard
};
const mapStateToProps = state => {
return { rcm_data: state.rcm_data, group_data: state.group_data };
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(RcmEditor);
Actions:
const ADD_RATE_CARD = "ADD_RATE_CARD";
export const addRateCard = rateCard => ({ type: ADD_RATE_CARD, payload: rateCard });
Reducer:
Copy state (just a precaution), increment added_count property of group_data and change added property of rcm_data referenced by action. payload Id, return a new state. Everything seems pure here
const initialState = {
rcm_data: {},
group_data: {},
};
const rootReducer = (state = initialState, action) => {
case "ADD_RATE_CARD":
let _state = { ...state };
let rateCard = action.payload;
_state.group_data[rateCard.GroupName].added_count++;
_state.rcm_data[rateCard.Id].added = true;
let data = {
rcm_data: _state.rcm_data,
group_data: _state.group_data
};
return { ...state, rcm_data: _state.rcm_data, group_data: _state.group_data };
default:
return state;
}
};
export default rootReducer;
javascript reactjs redux
javascript reactjs redux
edited Nov 23 '18 at 13:30
CountGradsky
asked Nov 23 '18 at 13:22
CountGradskyCountGradsky
1412213
1412213
not sure whether reducer is a good place to manipulate store
. I personally prefer that logic should go in actions and reducer should only give new state. You can use redux-thunk in your actions to add logic
– Ajay Gaur
Nov 23 '18 at 13:25
I tought that accessing store in action creators is not best practice
– CountGradsky
Nov 23 '18 at 13:28
add a comment |
not sure whether reducer is a good place to manipulate store
. I personally prefer that logic should go in actions and reducer should only give new state. You can use redux-thunk in your actions to add logic
– Ajay Gaur
Nov 23 '18 at 13:25
I tought that accessing store in action creators is not best practice
– CountGradsky
Nov 23 '18 at 13:28
not sure whether reducer is a good place to manipulate store
. I personally prefer that logic should go in actions and reducer should only give new state. You can use redux-thunk in your actions to add logic– Ajay Gaur
Nov 23 '18 at 13:25
not sure whether reducer is a good place to manipulate store
. I personally prefer that logic should go in actions and reducer should only give new state. You can use redux-thunk in your actions to add logic– Ajay Gaur
Nov 23 '18 at 13:25
I tought that accessing store in action creators is not best practice
– CountGradsky
Nov 23 '18 at 13:28
I tought that accessing store in action creators is not best practice
– CountGradsky
Nov 23 '18 at 13:28
add a comment |
1 Answer
1
active
oldest
votes
Your reducer copies objects (rcm_data
and group_data
) and mutates them.
Redux compares shallowly - using the same object refs there is no difference then no update/rerender.
Simply create a new sub-objects, sth like:
let data = {
rcm_data: {...state.rcm_data},
group_data: {...state.group_data}
};
data.group_data[rateCard.GroupName].added_count++;
data.rcm_data[rateCard.Id].added = true;
return data
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
Newrcm_data
andgroup_data
objects (with updated data) created - used inmapStateToProps
- new for reduxshouldComponentUpdate
.
– xadm
Nov 23 '18 at 13:46
Will have more close look into it. I changed return statement toreturn {...state, ...data};
which works as well. In case I add more states later on
– CountGradsky
Nov 23 '18 at 13:50
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%2f53447512%2fmapstatetoprops-not-updating-component-on-change%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
Your reducer copies objects (rcm_data
and group_data
) and mutates them.
Redux compares shallowly - using the same object refs there is no difference then no update/rerender.
Simply create a new sub-objects, sth like:
let data = {
rcm_data: {...state.rcm_data},
group_data: {...state.group_data}
};
data.group_data[rateCard.GroupName].added_count++;
data.rcm_data[rateCard.Id].added = true;
return data
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
Newrcm_data
andgroup_data
objects (with updated data) created - used inmapStateToProps
- new for reduxshouldComponentUpdate
.
– xadm
Nov 23 '18 at 13:46
Will have more close look into it. I changed return statement toreturn {...state, ...data};
which works as well. In case I add more states later on
– CountGradsky
Nov 23 '18 at 13:50
add a comment |
Your reducer copies objects (rcm_data
and group_data
) and mutates them.
Redux compares shallowly - using the same object refs there is no difference then no update/rerender.
Simply create a new sub-objects, sth like:
let data = {
rcm_data: {...state.rcm_data},
group_data: {...state.group_data}
};
data.group_data[rateCard.GroupName].added_count++;
data.rcm_data[rateCard.Id].added = true;
return data
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
Newrcm_data
andgroup_data
objects (with updated data) created - used inmapStateToProps
- new for reduxshouldComponentUpdate
.
– xadm
Nov 23 '18 at 13:46
Will have more close look into it. I changed return statement toreturn {...state, ...data};
which works as well. In case I add more states later on
– CountGradsky
Nov 23 '18 at 13:50
add a comment |
Your reducer copies objects (rcm_data
and group_data
) and mutates them.
Redux compares shallowly - using the same object refs there is no difference then no update/rerender.
Simply create a new sub-objects, sth like:
let data = {
rcm_data: {...state.rcm_data},
group_data: {...state.group_data}
};
data.group_data[rateCard.GroupName].added_count++;
data.rcm_data[rateCard.Id].added = true;
return data
Your reducer copies objects (rcm_data
and group_data
) and mutates them.
Redux compares shallowly - using the same object refs there is no difference then no update/rerender.
Simply create a new sub-objects, sth like:
let data = {
rcm_data: {...state.rcm_data},
group_data: {...state.group_data}
};
data.group_data[rateCard.GroupName].added_count++;
data.rcm_data[rateCard.Id].added = true;
return data
edited Nov 23 '18 at 13:39
answered Nov 23 '18 at 13:30
xadmxadm
1,651258
1,651258
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
Newrcm_data
andgroup_data
objects (with updated data) created - used inmapStateToProps
- new for reduxshouldComponentUpdate
.
– xadm
Nov 23 '18 at 13:46
Will have more close look into it. I changed return statement toreturn {...state, ...data};
which works as well. In case I add more states later on
– CountGradsky
Nov 23 '18 at 13:50
add a comment |
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
Newrcm_data
andgroup_data
objects (with updated data) created - used inmapStateToProps
- new for reduxshouldComponentUpdate
.
– xadm
Nov 23 '18 at 13:46
Will have more close look into it. I changed return statement toreturn {...state, ...data};
which works as well. In case I add more states later on
– CountGradsky
Nov 23 '18 at 13:50
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
This worked altough I dont see difference with what I did
– CountGradsky
Nov 23 '18 at 13:43
New
rcm_data
and group_data
objects (with updated data) created - used in mapStateToProps
- new for redux shouldComponentUpdate
.– xadm
Nov 23 '18 at 13:46
New
rcm_data
and group_data
objects (with updated data) created - used in mapStateToProps
- new for redux shouldComponentUpdate
.– xadm
Nov 23 '18 at 13:46
Will have more close look into it. I changed return statement to
return {...state, ...data};
which works as well. In case I add more states later on– CountGradsky
Nov 23 '18 at 13:50
Will have more close look into it. I changed return statement to
return {...state, ...data};
which works as well. In case I add more states later on– CountGradsky
Nov 23 '18 at 13:50
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%2f53447512%2fmapstatetoprops-not-updating-component-on-change%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
not sure whether reducer is a good place to manipulate store
. I personally prefer that logic should go in actions and reducer should only give new state. You can use redux-thunk in your actions to add logic– Ajay Gaur
Nov 23 '18 at 13:25
I tought that accessing store in action creators is not best practice
– CountGradsky
Nov 23 '18 at 13:28