Is this the correct way to delete an item using redux?
I know I'm not supposed to mutate the input and should clone the object to mutate it. I was following the convention used on a redux starter project which used:
ADD_ITEM: (state, action) => ({
...state,
items: [...state.items, action.payload.value],
lastUpdated: action.payload.date
})
for adding an item - I get the use of spread to append the item in the array.
for deleting I used:
DELETE_ITEM: (state, action) => ({
...state,
items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
lastUpdated: Date.now()
})
but this is mutating the input state object - is this forbidden even though I am returning a new object?
javascript reactjs redux
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
asked Jan 3 '16 at 23:07
Carlo
7571715
add a comment |
I know I'm not supposed to mutate the input and should clone the object to mutate it. I was following the convention used on a redux starter project which used:
ADD_ITEM: (state, action) => ({
...state,
items: [...state.items, action.payload.value],
lastUpdated: action.payload.date
})
for adding an item - I get the use of spread to append the item in the array.
for deleting I used:
DELETE_ITEM: (state, action) => ({
...state,
items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
lastUpdated: Date.now()
})
but this is mutating the input state object - is this forbidden even though I am returning a new object?
javascript reactjs redux
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
asked Jan 3 '16 at 23:07
Carlo
7571715
1
Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law.
– m0meni
Jan 3 '16 at 23:15
Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach?
– Carlo
Jan 3 '16 at 23:20
@AR7 as per your suggestion:items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )]using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way?
– Carlo
Jan 3 '16 at 23:29
add a comment |
I know I'm not supposed to mutate the input and should clone the object to mutate it. I was following the convention used on a redux starter project which used:
ADD_ITEM: (state, action) => ({
...state,
items: [...state.items, action.payload.value],
lastUpdated: action.payload.date
})
for adding an item - I get the use of spread to append the item in the array.
for deleting I used:
DELETE_ITEM: (state, action) => ({
...state,
items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
lastUpdated: Date.now()
})
but this is mutating the input state object - is this forbidden even though I am returning a new object?
javascript reactjs redux
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
asked Jan 3 '16 at 23:07
Carlo
7571715
I know I'm not supposed to mutate the input and should clone the object to mutate it. I was following the convention used on a redux starter project which used:
ADD_ITEM: (state, action) => ({
...state,
items: [...state.items, action.payload.value],
lastUpdated: action.payload.date
})
for adding an item - I get the use of spread to append the item in the array.
for deleting I used:
DELETE_ITEM: (state, action) => ({
...state,
items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
lastUpdated: Date.now()
})
but this is mutating the input state object - is this forbidden even though I am returning a new object?
javascript reactjs redux
javascript reactjs redux
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
asked Jan 3 '16 at 23:07
Carlo
7571715
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
asked Jan 3 '16 at 23:07
Carlo
7571715
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
edited Jan 4 '16 at 8:12
Felix Kling
543k125846901
543k125846901
asked Jan 3 '16 at 23:07
Carlo
7571715
asked Jan 3 '16 at 23:07
Carlo
7571715
asked Jan 3 '16 at 23:07
Carlo
7571715
7571715
1
Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law.
– m0meni
Jan 3 '16 at 23:15
Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach?
– Carlo
Jan 3 '16 at 23:20
@AR7 as per your suggestion:items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )]using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way?
– Carlo
Jan 3 '16 at 23:29
add a comment |
1
Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law.
– m0meni
Jan 3 '16 at 23:15
Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach?
– Carlo
Jan 3 '16 at 23:20
@AR7 as per your suggestion:items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )]using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way?
– Carlo
Jan 3 '16 at 23:29
1
1
Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law.
– m0meni
Jan 3 '16 at 23:15
Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law.
– m0meni
Jan 3 '16 at 23:15
Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach?
– Carlo
Jan 3 '16 at 23:20
Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach?
– Carlo
Jan 3 '16 at 23:20
@AR7 as per your suggestion:
items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )] using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way?– Carlo
Jan 3 '16 at 23:29
@AR7 as per your suggestion:
items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )] using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way?– Carlo
Jan 3 '16 at 23:29
add a comment |
4 Answers
4
active
oldest
votes
No. Never mutate your state.
Even though you're returning a new object, you're still polluting the old object, which you never want to do. This makes it problematic when doing comparisons between the old and the new state. For instance in shouldComponentUpdate which react-redux uses under the hood. It also makes time travel impossible (i.e. undo and redo).
Instead, use immutable methods. Always use Array#slice and never Array#splice.
I assume from your code that action.payload is the index of the item being removed. A better way would be as follows:
items: [
...state.items.slice(0, action.payload),
...state.items.slice(action.payload + 1)
],
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
this doesn't work if we're dealing with the last element in the array, also the use of...in the second statement will double the content of your state
– Thaenor
Sep 20 '17 at 16:30
3
Please prove that with a jsfiddle/codepen example. The snippetarr.slice(arr.length)should always produce an empty array no matter what the contents ofarr.
– David L. Walsh
Sep 21 '17 at 1:37
1
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator...in the second part -...state.items.slice(action.payload + 1)
– Thaenor
Sep 21 '17 at 10:14
3
Array#slicereturns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.
– David L. Walsh
Sep 21 '17 at 22:45
2
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
add a comment |
You can use the array filter method to remove a specific element from an array without mutating the original state.
return state.filter(element => element !== action.payload);
In the context of your code, it would look something like this:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => item !== action.payload),
lastUpdated: Date.now()
})
answered Jan 3 '17 at 16:22
Steph M
84835
2
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
4
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
3
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.arr.filter((val, i) => i !== action.payload )
– erich2k8
Jun 25 at 19:05
add a comment |
The ES6 Array.prototype.filter method returns a new array with the items that match the criteria. Therefore, in the context of the original question, this would be:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => action.payload !== item),
lastUpdated: Date.now()
})
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
.filter()is not an ES2015 method, but has been added in the prior version ES5.
– morkro
Nov 29 '17 at 18:10
add a comment |
Another one variation of the immutable "DELETED" reducer for the array with objects:
const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
...state.slice(0, index),
...state.slice(index + 1)
];
return stateTemp;
answered May 29 at 0:50
Roman
2,5281726
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%2f34582678%2fis-this-the-correct-way-to-delete-an-item-using-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
No. Never mutate your state.
Even though you're returning a new object, you're still polluting the old object, which you never want to do. This makes it problematic when doing comparisons between the old and the new state. For instance in shouldComponentUpdate which react-redux uses under the hood. It also makes time travel impossible (i.e. undo and redo).
Instead, use immutable methods. Always use Array#slice and never Array#splice.
I assume from your code that action.payload is the index of the item being removed. A better way would be as follows:
items: [
...state.items.slice(0, action.payload),
...state.items.slice(action.payload + 1)
],
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
this doesn't work if we're dealing with the last element in the array, also the use of...in the second statement will double the content of your state
– Thaenor
Sep 20 '17 at 16:30
3
Please prove that with a jsfiddle/codepen example. The snippetarr.slice(arr.length)should always produce an empty array no matter what the contents ofarr.
– David L. Walsh
Sep 21 '17 at 1:37
1
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator...in the second part -...state.items.slice(action.payload + 1)
– Thaenor
Sep 21 '17 at 10:14
3
Array#slicereturns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.
– David L. Walsh
Sep 21 '17 at 22:45
2
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
add a comment |
No. Never mutate your state.
Even though you're returning a new object, you're still polluting the old object, which you never want to do. This makes it problematic when doing comparisons between the old and the new state. For instance in shouldComponentUpdate which react-redux uses under the hood. It also makes time travel impossible (i.e. undo and redo).
Instead, use immutable methods. Always use Array#slice and never Array#splice.
I assume from your code that action.payload is the index of the item being removed. A better way would be as follows:
items: [
...state.items.slice(0, action.payload),
...state.items.slice(action.payload + 1)
],
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
this doesn't work if we're dealing with the last element in the array, also the use of...in the second statement will double the content of your state
– Thaenor
Sep 20 '17 at 16:30
3
Please prove that with a jsfiddle/codepen example. The snippetarr.slice(arr.length)should always produce an empty array no matter what the contents ofarr.
– David L. Walsh
Sep 21 '17 at 1:37
1
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator...in the second part -...state.items.slice(action.payload + 1)
– Thaenor
Sep 21 '17 at 10:14
3
Array#slicereturns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.
– David L. Walsh
Sep 21 '17 at 22:45
2
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
add a comment |
No. Never mutate your state.
Even though you're returning a new object, you're still polluting the old object, which you never want to do. This makes it problematic when doing comparisons between the old and the new state. For instance in shouldComponentUpdate which react-redux uses under the hood. It also makes time travel impossible (i.e. undo and redo).
Instead, use immutable methods. Always use Array#slice and never Array#splice.
I assume from your code that action.payload is the index of the item being removed. A better way would be as follows:
items: [
...state.items.slice(0, action.payload),
...state.items.slice(action.payload + 1)
],
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
No. Never mutate your state.
Even though you're returning a new object, you're still polluting the old object, which you never want to do. This makes it problematic when doing comparisons between the old and the new state. For instance in shouldComponentUpdate which react-redux uses under the hood. It also makes time travel impossible (i.e. undo and redo).
Instead, use immutable methods. Always use Array#slice and never Array#splice.
I assume from your code that action.payload is the index of the item being removed. A better way would be as follows:
items: [
...state.items.slice(0, action.payload),
...state.items.slice(action.payload + 1)
],
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
edited Jan 3 '16 at 23:40
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
answered Jan 3 '16 at 23:32
David L. Walsh
13.6k44337
13.6k44337
this doesn't work if we're dealing with the last element in the array, also the use of...in the second statement will double the content of your state
– Thaenor
Sep 20 '17 at 16:30
3
Please prove that with a jsfiddle/codepen example. The snippetarr.slice(arr.length)should always produce an empty array no matter what the contents ofarr.
– David L. Walsh
Sep 21 '17 at 1:37
1
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator...in the second part -...state.items.slice(action.payload + 1)
– Thaenor
Sep 21 '17 at 10:14
3
Array#slicereturns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.
– David L. Walsh
Sep 21 '17 at 22:45
2
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
add a comment |
this doesn't work if we're dealing with the last element in the array, also the use of...in the second statement will double the content of your state
– Thaenor
Sep 20 '17 at 16:30
3
Please prove that with a jsfiddle/codepen example. The snippetarr.slice(arr.length)should always produce an empty array no matter what the contents ofarr.
– David L. Walsh
Sep 21 '17 at 1:37
1
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator...in the second part -...state.items.slice(action.payload + 1)
– Thaenor
Sep 21 '17 at 10:14
3
Array#slicereturns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.
– David L. Walsh
Sep 21 '17 at 22:45
2
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
this doesn't work if we're dealing with the last element in the array, also the use of
... in the second statement will double the content of your state– Thaenor
Sep 20 '17 at 16:30
this doesn't work if we're dealing with the last element in the array, also the use of
... in the second statement will double the content of your state– Thaenor
Sep 20 '17 at 16:30
3
3
Please prove that with a jsfiddle/codepen example. The snippet
arr.slice(arr.length) should always produce an empty array no matter what the contents of arr.– David L. Walsh
Sep 21 '17 at 1:37
Please prove that with a jsfiddle/codepen example. The snippet
arr.slice(arr.length) should always produce an empty array no matter what the contents of arr.– David L. Walsh
Sep 21 '17 at 1:37
1
1
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator
... in the second part - ...state.items.slice(action.payload + 1)– Thaenor
Sep 21 '17 at 10:14
@david-l-walsh sorry for the confusion, I must've made a typo or something when testing this example. It works wonders. My only question is: why the need of the spread operator
... in the second part - ...state.items.slice(action.payload + 1)– Thaenor
Sep 21 '17 at 10:14
3
3
Array#slice returns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.– David L. Walsh
Sep 21 '17 at 22:45
Array#slice returns an array. To combine the two slices into a single array, I've used the spread operator. Without it, you would have an array of arrays.– David L. Walsh
Sep 21 '17 at 22:45
2
2
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
that makes sense. Thank you very much for clarifying (and sorry for the confusion at first).
– Thaenor
Sep 22 '17 at 10:53
add a comment |
You can use the array filter method to remove a specific element from an array without mutating the original state.
return state.filter(element => element !== action.payload);
In the context of your code, it would look something like this:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => item !== action.payload),
lastUpdated: Date.now()
})
answered Jan 3 '17 at 16:22
Steph M
84835
2
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
4
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
3
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.arr.filter((val, i) => i !== action.payload )
– erich2k8
Jun 25 at 19:05
add a comment |
You can use the array filter method to remove a specific element from an array without mutating the original state.
return state.filter(element => element !== action.payload);
In the context of your code, it would look something like this:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => item !== action.payload),
lastUpdated: Date.now()
})
answered Jan 3 '17 at 16:22
Steph M
84835
2
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
4
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
3
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.arr.filter((val, i) => i !== action.payload )
– erich2k8
Jun 25 at 19:05
add a comment |
You can use the array filter method to remove a specific element from an array without mutating the original state.
return state.filter(element => element !== action.payload);
In the context of your code, it would look something like this:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => item !== action.payload),
lastUpdated: Date.now()
})
answered Jan 3 '17 at 16:22
Steph M
84835
You can use the array filter method to remove a specific element from an array without mutating the original state.
return state.filter(element => element !== action.payload);
In the context of your code, it would look something like this:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => item !== action.payload),
lastUpdated: Date.now()
})
answered Jan 3 '17 at 16:22
Steph M
84835
edited Nov 7 '17 at 22:59
answered Jan 3 '17 at 16:22
Steph M
84835
answered Jan 3 '17 at 16:22
Steph M
84835
answered Jan 3 '17 at 16:22
Steph M
84835
84835
2
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
4
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
3
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.arr.filter((val, i) => i !== action.payload )
– erich2k8
Jun 25 at 19:05
add a comment |
2
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
4
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
3
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.arr.filter((val, i) => i !== action.payload )
– erich2k8
Jun 25 at 19:05
2
2
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Can you write this in the context of the original question, i.e. the asker has an items array within the state, whereas your answer suggests that the state is purely the array itself.
– JoeTidee
Jun 4 '17 at 13:03
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
Does the filter produce a new array?
– chenop
Oct 19 '17 at 10:50
4
4
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@chenop Yes, the Array.filter method returns a new array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– Steph M
Oct 20 '17 at 16:33
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
@JoeTidee added :)
– Steph M
Nov 7 '17 at 23:00
3
3
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.
arr.filter((val, i) => i !== action.payload )– erich2k8
Jun 25 at 19:05
Note that if there are duplicates, this will remove ALL of them. To use filter to remove a specific index, you can use e.g.
arr.filter((val, i) => i !== action.payload )– erich2k8
Jun 25 at 19:05
add a comment |
The ES6 Array.prototype.filter method returns a new array with the items that match the criteria. Therefore, in the context of the original question, this would be:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => action.payload !== item),
lastUpdated: Date.now()
})
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
.filter()is not an ES2015 method, but has been added in the prior version ES5.
– morkro
Nov 29 '17 at 18:10
add a comment |
The ES6 Array.prototype.filter method returns a new array with the items that match the criteria. Therefore, in the context of the original question, this would be:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => action.payload !== item),
lastUpdated: Date.now()
})
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
.filter()is not an ES2015 method, but has been added in the prior version ES5.
– morkro
Nov 29 '17 at 18:10
add a comment |
The ES6 Array.prototype.filter method returns a new array with the items that match the criteria. Therefore, in the context of the original question, this would be:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => action.payload !== item),
lastUpdated: Date.now()
})
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
The ES6 Array.prototype.filter method returns a new array with the items that match the criteria. Therefore, in the context of the original question, this would be:
DELETE_ITEM: (state, action) => ({
...state,
items: state.items.filter(item => action.payload !== item),
lastUpdated: Date.now()
})
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
answered Jun 15 '17 at 23:33
JoeTidee
5,01854076
5,01854076
.filter()is not an ES2015 method, but has been added in the prior version ES5.
– morkro
Nov 29 '17 at 18:10
add a comment |
.filter()is not an ES2015 method, but has been added in the prior version ES5.
– morkro
Nov 29 '17 at 18:10
.filter() is not an ES2015 method, but has been added in the prior version ES5.– morkro
Nov 29 '17 at 18:10
.filter() is not an ES2015 method, but has been added in the prior version ES5.– morkro
Nov 29 '17 at 18:10
add a comment |
Another one variation of the immutable "DELETED" reducer for the array with objects:
const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
...state.slice(0, index),
...state.slice(index + 1)
];
return stateTemp;
answered May 29 at 0:50
Roman
2,5281726
add a comment |
Another one variation of the immutable "DELETED" reducer for the array with objects:
const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
...state.slice(0, index),
...state.slice(index + 1)
];
return stateTemp;
answered May 29 at 0:50
Roman
2,5281726
add a comment |
Another one variation of the immutable "DELETED" reducer for the array with objects:
const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
...state.slice(0, index),
...state.slice(index + 1)
];
return stateTemp;
answered May 29 at 0:50
Roman
2,5281726
Another one variation of the immutable "DELETED" reducer for the array with objects:
const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
...state.slice(0, index),
...state.slice(index + 1)
];
return stateTemp;
answered May 29 at 0:50
Roman
2,5281726
edited May 29 at 0:56
answered May 29 at 0:50
Roman
2,5281726
answered May 29 at 0:50
Roman
2,5281726
answered May 29 at 0:50
Roman
2,5281726
2,5281726
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%2f34582678%2fis-this-the-correct-way-to-delete-an-item-using-redux%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
1
Quick question. Splice returns the items that you removed. Is that your intention? If not you should be using slice, which also abides by the no mutations law.
– m0meni
Jan 3 '16 at 23:15
Well in this example I'm splicing the two sections of the array together into a new array - with the item I wanted to remove left out. Slice also returns the removed item right? Only it does so without mutating the original array so that would be the better approach?
– Carlo
Jan 3 '16 at 23:20
@AR7 as per your suggestion:
items: [...state.items.slice(0, action.payload.value), ...state.items.slice(action.payload.value + 1 )]using slice now instead of splice so as to not mutate the input - is this the way to go or is there a more concise way?– Carlo
Jan 3 '16 at 23:29