Redux reducer: Add object to array on returning new state
up vote
0
down vote
favorite
I´m new with Redux and I´m trying to avoid doing the things in the wrong way.
I´m using redux-thunk. I have a function that makes the call to the API and depending on if there is an error or not it dispatches:
fetchUserOK(data) or fetchUserErr(data)
On my reducer file, when I´m switching if the case is
FETCH_USER_OK I do:
return action.payload;
FETCH_USER_ERR I do:
return [...state, { error: action.payload }];
I think return action.payload; is ok and I dont need to spread the previous state. Please, correct me if I´m wrong.
But, I do not have any clue if what I´m doing for error is right:
return [...state, { error: action.payload }];
The payload for OK would look like
[{id: 1, name: "Peter"}, {id: 2, name: "Kevin"}, {id: 3, name: "Paul"}]
The payload for ERR: string
404
Should I return the state (...state) ?
Should I wrap between {} the key:value?
I will appreciate advice.
I´m trying to avoid bad practices.
reactjs redux
asked Nov 9 at 19:30
Peter
1879
add a comment |
up vote
0
down vote
favorite
I´m new with Redux and I´m trying to avoid doing the things in the wrong way.
I´m using redux-thunk. I have a function that makes the call to the API and depending on if there is an error or not it dispatches:
fetchUserOK(data) or fetchUserErr(data)
On my reducer file, when I´m switching if the case is
FETCH_USER_OK I do:
return action.payload;
FETCH_USER_ERR I do:
return [...state, { error: action.payload }];
I think return action.payload; is ok and I dont need to spread the previous state. Please, correct me if I´m wrong.
But, I do not have any clue if what I´m doing for error is right:
return [...state, { error: action.payload }];
The payload for OK would look like
[{id: 1, name: "Peter"}, {id: 2, name: "Kevin"}, {id: 3, name: "Paul"}]
The payload for ERR: string
404
Should I return the state (...state) ?
Should I wrap between {} the key:value?
I will appreciate advice.
I´m trying to avoid bad practices.
reactjs redux
asked Nov 9 at 19:30
Peter
1879
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I´m new with Redux and I´m trying to avoid doing the things in the wrong way.
I´m using redux-thunk. I have a function that makes the call to the API and depending on if there is an error or not it dispatches:
fetchUserOK(data) or fetchUserErr(data)
On my reducer file, when I´m switching if the case is
FETCH_USER_OK I do:
return action.payload;
FETCH_USER_ERR I do:
return [...state, { error: action.payload }];
I think return action.payload; is ok and I dont need to spread the previous state. Please, correct me if I´m wrong.
But, I do not have any clue if what I´m doing for error is right:
return [...state, { error: action.payload }];
The payload for OK would look like
[{id: 1, name: "Peter"}, {id: 2, name: "Kevin"}, {id: 3, name: "Paul"}]
The payload for ERR: string
404
Should I return the state (...state) ?
Should I wrap between {} the key:value?
I will appreciate advice.
I´m trying to avoid bad practices.
reactjs redux
asked Nov 9 at 19:30
Peter
1879
I´m new with Redux and I´m trying to avoid doing the things in the wrong way.
I´m using redux-thunk. I have a function that makes the call to the API and depending on if there is an error or not it dispatches:
fetchUserOK(data) or fetchUserErr(data)
On my reducer file, when I´m switching if the case is
FETCH_USER_OK I do:
return action.payload;
FETCH_USER_ERR I do:
return [...state, { error: action.payload }];
I think return action.payload; is ok and I dont need to spread the previous state. Please, correct me if I´m wrong.
But, I do not have any clue if what I´m doing for error is right:
return [...state, { error: action.payload }];
The payload for OK would look like
[{id: 1, name: "Peter"}, {id: 2, name: "Kevin"}, {id: 3, name: "Paul"}]
The payload for ERR: string
404
Should I return the state (...state) ?
Should I wrap between {} the key:value?
I will appreciate advice.
I´m trying to avoid bad practices.
reactjs redux
reactjs redux
asked Nov 9 at 19:30
Peter
1879
asked Nov 9 at 19:30
Peter
1879
asked Nov 9 at 19:30
Peter
1879
asked Nov 9 at 19:30
Peter
1879
asked Nov 9 at 19:30
Peter
1879
1879
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Basically the reducer returns the update state when you do {...state, anyfield: action.payload} you are actually updating the state, this means that copy all fields from state and replace all field after first ,. It is recommended to always update your state with immutable update patterns rather then doing state.somefield = value followed by return state.
So to answer your question. From what i understood your reducer MUST always return an update state so returning just action.payload is not the correct way to do it. You must always add existing state by ...state.
[UPDATE]
You can read this article. It will tell you about redux cycle. Whatever return from the reducer will replace the previous state of the application so you always want to return updated state will all the fields rather then just action payload.
answered Nov 9 at 19:55
Ahsan Sohail
409212
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',
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%2f53232183%2fredux-reducer-add-object-to-array-on-returning-new-state%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
up vote
0
down vote
Basically the reducer returns the update state when you do {...state, anyfield: action.payload} you are actually updating the state, this means that copy all fields from state and replace all field after first ,. It is recommended to always update your state with immutable update patterns rather then doing state.somefield = value followed by return state.
So to answer your question. From what i understood your reducer MUST always return an update state so returning just action.payload is not the correct way to do it. You must always add existing state by ...state.
[UPDATE]
You can read this article. It will tell you about redux cycle. Whatever return from the reducer will replace the previous state of the application so you always want to return updated state will all the fields rather then just action payload.
answered Nov 9 at 19:55
Ahsan Sohail
409212
add a comment |
up vote
0
down vote
Basically the reducer returns the update state when you do {...state, anyfield: action.payload} you are actually updating the state, this means that copy all fields from state and replace all field after first ,. It is recommended to always update your state with immutable update patterns rather then doing state.somefield = value followed by return state.
So to answer your question. From what i understood your reducer MUST always return an update state so returning just action.payload is not the correct way to do it. You must always add existing state by ...state.
[UPDATE]
You can read this article. It will tell you about redux cycle. Whatever return from the reducer will replace the previous state of the application so you always want to return updated state will all the fields rather then just action payload.
answered Nov 9 at 19:55
Ahsan Sohail
409212
add a comment |
up vote
0
down vote
up vote
0
down vote
Basically the reducer returns the update state when you do {...state, anyfield: action.payload} you are actually updating the state, this means that copy all fields from state and replace all field after first ,. It is recommended to always update your state with immutable update patterns rather then doing state.somefield = value followed by return state.
So to answer your question. From what i understood your reducer MUST always return an update state so returning just action.payload is not the correct way to do it. You must always add existing state by ...state.
[UPDATE]
You can read this article. It will tell you about redux cycle. Whatever return from the reducer will replace the previous state of the application so you always want to return updated state will all the fields rather then just action payload.
answered Nov 9 at 19:55
Ahsan Sohail
409212
Basically the reducer returns the update state when you do {...state, anyfield: action.payload} you are actually updating the state, this means that copy all fields from state and replace all field after first ,. It is recommended to always update your state with immutable update patterns rather then doing state.somefield = value followed by return state.
So to answer your question. From what i understood your reducer MUST always return an update state so returning just action.payload is not the correct way to do it. You must always add existing state by ...state.
[UPDATE]
You can read this article. It will tell you about redux cycle. Whatever return from the reducer will replace the previous state of the application so you always want to return updated state will all the fields rather then just action payload.
answered Nov 9 at 19:55
Ahsan Sohail
409212
edited Nov 9 at 20:04
answered Nov 9 at 19:55
Ahsan Sohail
409212
answered Nov 9 at 19:55
Ahsan Sohail
409212
answered Nov 9 at 19:55
Ahsan Sohail
409212
409212
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53232183%2fredux-reducer-add-object-to-array-on-returning-new-state%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
