How to update an object in the redux store?
0
I want to add items in the object in the redux store one after the other as the user progresses in the application. Therefore, I want to add items in the store without removing the previous items in the store.
Please refer the code below:
Code for the reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
Code for the action:
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
details
}
});
Code for the disptach calls:
store.dispatch(addTravelPlan({destination: 'Cuba'}));
store.dispatch(addTravelPlan({hotel: 'Cuba Grand'}));
store.dispatch(addTravelPlan({travelMode: 'AirWays'}));
However, it appears that only the last item is added in the store which is the airways and the previous items are not persisted.
Please help!
Thanks in advance.
reactjs redux react-redux redux-store
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
|
show 2 more comments
0
I want to add items in the object in the redux store one after the other as the user progresses in the application. Therefore, I want to add items in the store without removing the previous items in the store.
Please refer the code below:
Code for the reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
Code for the action:
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
details
}
});
Code for the disptach calls:
store.dispatch(addTravelPlan({destination: 'Cuba'}));
store.dispatch(addTravelPlan({hotel: 'Cuba Grand'}));
store.dispatch(addTravelPlan({travelMode: 'AirWays'}));
However, it appears that only the last item is added in the store which is the airways and the previous items are not persisted.
Please help!
Thanks in advance.
reactjs redux react-redux redux-store
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
You should map state to props first, get all the data from the redux state and then add on what data you want. Combine them to an object and dispatch that object to the reducer
– Tony Bui
Dec 31 '18 at 9:34
what is your expected data in redux store?
– eramit2010
Dec 31 '18 at 9:38
I believe you are saying to add all the items together to the redux store. Is that what you mean?
– rajput sufiyaan
Dec 31 '18 at 9:38
@eramit2010 the currentravelplan object in the redux store must have all the three items i.e. destination, hotel and travelmode.
– rajput sufiyaan
Dec 31 '18 at 9:39
you might need to destructure details in your action {id: uuid(), ...details }
– eramit2010
Dec 31 '18 at 9:41
|
show 2 more comments
0
0
0
I want to add items in the object in the redux store one after the other as the user progresses in the application. Therefore, I want to add items in the store without removing the previous items in the store.
Please refer the code below:
Code for the reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
Code for the action:
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
details
}
});
Code for the disptach calls:
store.dispatch(addTravelPlan({destination: 'Cuba'}));
store.dispatch(addTravelPlan({hotel: 'Cuba Grand'}));
store.dispatch(addTravelPlan({travelMode: 'AirWays'}));
However, it appears that only the last item is added in the store which is the airways and the previous items are not persisted.
Please help!
Thanks in advance.
reactjs redux react-redux redux-store
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
I want to add items in the object in the redux store one after the other as the user progresses in the application. Therefore, I want to add items in the store without removing the previous items in the store.
Please refer the code below:
Code for the reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
Code for the action:
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
details
}
});
Code for the disptach calls:
store.dispatch(addTravelPlan({destination: 'Cuba'}));
store.dispatch(addTravelPlan({hotel: 'Cuba Grand'}));
store.dispatch(addTravelPlan({travelMode: 'AirWays'}));
However, it appears that only the last item is added in the store which is the airways and the previous items are not persisted.
Please help!
Thanks in advance.
reactjs redux react-redux redux-store
reactjs redux react-redux redux-store
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
asked Dec 31 '18 at 9:30
rajput sufiyaanrajput sufiyaan
266
266
You should map state to props first, get all the data from the redux state and then add on what data you want. Combine them to an object and dispatch that object to the reducer
– Tony Bui
Dec 31 '18 at 9:34
what is your expected data in redux store?
– eramit2010
Dec 31 '18 at 9:38
I believe you are saying to add all the items together to the redux store. Is that what you mean?
– rajput sufiyaan
Dec 31 '18 at 9:38
@eramit2010 the currentravelplan object in the redux store must have all the three items i.e. destination, hotel and travelmode.
– rajput sufiyaan
Dec 31 '18 at 9:39
you might need to destructure details in your action {id: uuid(), ...details }
– eramit2010
Dec 31 '18 at 9:41
|
show 2 more comments
You should map state to props first, get all the data from the redux state and then add on what data you want. Combine them to an object and dispatch that object to the reducer
– Tony Bui
Dec 31 '18 at 9:34
what is your expected data in redux store?
– eramit2010
Dec 31 '18 at 9:38
I believe you are saying to add all the items together to the redux store. Is that what you mean?
– rajput sufiyaan
Dec 31 '18 at 9:38
@eramit2010 the currentravelplan object in the redux store must have all the three items i.e. destination, hotel and travelmode.
– rajput sufiyaan
Dec 31 '18 at 9:39
you might need to destructure details in your action {id: uuid(), ...details }
– eramit2010
Dec 31 '18 at 9:41
You should map state to props first, get all the data from the redux state and then add on what data you want. Combine them to an object and dispatch that object to the reducer
– Tony Bui
Dec 31 '18 at 9:34
You should map state to props first, get all the data from the redux state and then add on what data you want. Combine them to an object and dispatch that object to the reducer
– Tony Bui
Dec 31 '18 at 9:34
what is your expected data in redux store?
– eramit2010
Dec 31 '18 at 9:38
what is your expected data in redux store?
– eramit2010
Dec 31 '18 at 9:38
I believe you are saying to add all the items together to the redux store. Is that what you mean?
– rajput sufiyaan
Dec 31 '18 at 9:38
I believe you are saying to add all the items together to the redux store. Is that what you mean?
– rajput sufiyaan
Dec 31 '18 at 9:38
@eramit2010 the currentravelplan object in the redux store must have all the three items i.e. destination, hotel and travelmode.
– rajput sufiyaan
Dec 31 '18 at 9:39
@eramit2010 the currentravelplan object in the redux store must have all the three items i.e. destination, hotel and travelmode.
– rajput sufiyaan
Dec 31 '18 at 9:39
you might need to destructure details in your action {id: uuid(), ...details }
– eramit2010
Dec 31 '18 at 9:41
you might need to destructure details in your action {id: uuid(), ...details }
– eramit2010
Dec 31 '18 at 9:41
|
show 2 more comments
2 Answers
2
active
oldest
votes
0
I assume you want your data to look like this after the dispatch calls:
currentTravelPlan: {
id: uuid(),
destination: 'Cuba',
hotel: 'Cuba Grand',
travelMode: 'Airways'
}
In that case, your action code should be:
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
and your reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
...action.currentTravelPlan
}
default:
return state;
}
};
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
add a comment |
0
In reducer you should set currentTravelPlan to empty object so you know how your state going to look.
const currentTravelPlanDefaultState = {
currentTravelPlan: {}
};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
in your action you are passing data wrongly. you need to destructure details before sending it. if you don't destructure it will always pass details: your object
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
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%2f53985792%2fhow-to-update-an-object-in-the-redux-store%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I assume you want your data to look like this after the dispatch calls:
currentTravelPlan: {
id: uuid(),
destination: 'Cuba',
hotel: 'Cuba Grand',
travelMode: 'Airways'
}
In that case, your action code should be:
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
and your reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
...action.currentTravelPlan
}
default:
return state;
}
};
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
add a comment |
0
I assume you want your data to look like this after the dispatch calls:
currentTravelPlan: {
id: uuid(),
destination: 'Cuba',
hotel: 'Cuba Grand',
travelMode: 'Airways'
}
In that case, your action code should be:
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
and your reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
...action.currentTravelPlan
}
default:
return state;
}
};
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
add a comment |
0
0
0
I assume you want your data to look like this after the dispatch calls:
currentTravelPlan: {
id: uuid(),
destination: 'Cuba',
hotel: 'Cuba Grand',
travelMode: 'Airways'
}
In that case, your action code should be:
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
and your reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
...action.currentTravelPlan
}
default:
return state;
}
};
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
I assume you want your data to look like this after the dispatch calls:
currentTravelPlan: {
id: uuid(),
destination: 'Cuba',
hotel: 'Cuba Grand',
travelMode: 'Airways'
}
In that case, your action code should be:
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
and your reducer:
const currentTravelPlanDefaultState = {};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
...action.currentTravelPlan
}
default:
return state;
}
};
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
edited Jan 3 at 4:33
Yvette Colomb♦
20.3k1470110
20.3k1470110
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
answered Dec 31 '18 at 9:48
Liren YeoLiren Yeo
1,1051519
1,1051519
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
add a comment |
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Thanks! it appears to be working as desired.
– rajput sufiyaan
Dec 31 '18 at 11:26
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
Please don't post plagiarised content. Copied content needs original author attribution. See How to reference material written by others. I've rolled back to copied content.
– Yvette Colomb♦
Jan 3 at 4:34
add a comment |
0
In reducer you should set currentTravelPlan to empty object so you know how your state going to look.
const currentTravelPlanDefaultState = {
currentTravelPlan: {}
};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
in your action you are passing data wrongly. you need to destructure details before sending it. if you don't destructure it will always pass details: your object
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
add a comment |
0
In reducer you should set currentTravelPlan to empty object so you know how your state going to look.
const currentTravelPlanDefaultState = {
currentTravelPlan: {}
};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
in your action you are passing data wrongly. you need to destructure details before sending it. if you don't destructure it will always pass details: your object
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
add a comment |
0
0
0
In reducer you should set currentTravelPlan to empty object so you know how your state going to look.
const currentTravelPlanDefaultState = {
currentTravelPlan: {}
};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
in your action you are passing data wrongly. you need to destructure details before sending it. if you don't destructure it will always pass details: your object
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
In reducer you should set currentTravelPlan to empty object so you know how your state going to look.
const currentTravelPlanDefaultState = {
currentTravelPlan: {}
};
export default (state = currentTravelPlanDefaultState, action) => {
switch(action.type){
case 'ADD_PLAN':
return {
...state,
currentTravelPlan: {
...state.currentTravelPlan,
...action.currentTravelPlan
}
}
default:
return state;
}
};
in your action you are passing data wrongly. you need to destructure details before sending it. if you don't destructure it will always pass details: your object
import uuid from 'uuid';
export const addTravelPlan = (details) => ({
type: 'ADD_PLAN',
currentTravelPlan: {
id: uuid(),
...details
}
});
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
answered Dec 31 '18 at 9:54
eramit2010eramit2010
807617
807617
add a comment |
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%2f53985792%2fhow-to-update-an-object-in-the-redux-store%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
You should map state to props first, get all the data from the redux state and then add on what data you want. Combine them to an object and dispatch that object to the reducer
– Tony Bui
Dec 31 '18 at 9:34
what is your expected data in redux store?
– eramit2010
Dec 31 '18 at 9:38
I believe you are saying to add all the items together to the redux store. Is that what you mean?
– rajput sufiyaan
Dec 31 '18 at 9:38
@eramit2010 the currentravelplan object in the redux store must have all the three items i.e. destination, hotel and travelmode.
– rajput sufiyaan
Dec 31 '18 at 9:39
you might need to destructure details in your action {id: uuid(), ...details }
– eramit2010
Dec 31 '18 at 9:41