Redux dispatch is not removing an item from the array
0
I'm trying to remove an item from an array, the redux logger shows that everything went well.
However it still shows under the ordered list, after i click the x.
Reducer/posts.js
case 'REMOVE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
}
components/TodoList.js
import React from 'react';
import {connect} from 'react-redux';
import { deletePost } from '../actions'
const PostList = ({posts, deletePost}) => (
<ul className="list-group">
{posts.map(post=>
<li
className="list-group-item" key={post.id} {...post}> {post.text}
<button type="submit" onClick={()=> deletePost(post.id)} className =" btn btn-small-primary"> X </button>
</li>
)}
</ul>
);
const mapStateToProps = (state) => {
return { posts: state.posts };
};
const mapDispatchToProps = dispatch => ({
deletePost: id => dispatch(deletePost(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
Updated.
**ADD_POST reducer**
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
javascript reactjs react-redux
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
add a comment |
0
I'm trying to remove an item from an array, the redux logger shows that everything went well.
However it still shows under the ordered list, after i click the x.
Reducer/posts.js
case 'REMOVE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
}
components/TodoList.js
import React from 'react';
import {connect} from 'react-redux';
import { deletePost } from '../actions'
const PostList = ({posts, deletePost}) => (
<ul className="list-group">
{posts.map(post=>
<li
className="list-group-item" key={post.id} {...post}> {post.text}
<button type="submit" onClick={()=> deletePost(post.id)} className =" btn btn-small-primary"> X </button>
</li>
)}
</ul>
);
const mapStateToProps = (state) => {
return { posts: state.posts };
};
const mapDispatchToProps = dispatch => ({
deletePost: id => dispatch(deletePost(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
Updated.
**ADD_POST reducer**
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
javascript reactjs react-redux
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
1
Can you provide a link to the demo?
– Anand Undavia
Nov 22 '18 at 6:53
Or at least show the contents of the array
– Daniel Hilgarth
Nov 22 '18 at 6:53
i updated it. maybe this gives insight.
– BARNOWL
Nov 22 '18 at 7:01
add a comment |
0
0
0
I'm trying to remove an item from an array, the redux logger shows that everything went well.
However it still shows under the ordered list, after i click the x.
Reducer/posts.js
case 'REMOVE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
}
components/TodoList.js
import React from 'react';
import {connect} from 'react-redux';
import { deletePost } from '../actions'
const PostList = ({posts, deletePost}) => (
<ul className="list-group">
{posts.map(post=>
<li
className="list-group-item" key={post.id} {...post}> {post.text}
<button type="submit" onClick={()=> deletePost(post.id)} className =" btn btn-small-primary"> X </button>
</li>
)}
</ul>
);
const mapStateToProps = (state) => {
return { posts: state.posts };
};
const mapDispatchToProps = dispatch => ({
deletePost: id => dispatch(deletePost(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
Updated.
**ADD_POST reducer**
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
javascript reactjs react-redux
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
I'm trying to remove an item from an array, the redux logger shows that everything went well.
However it still shows under the ordered list, after i click the x.
Reducer/posts.js
case 'REMOVE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
}
components/TodoList.js
import React from 'react';
import {connect} from 'react-redux';
import { deletePost } from '../actions'
const PostList = ({posts, deletePost}) => (
<ul className="list-group">
{posts.map(post=>
<li
className="list-group-item" key={post.id} {...post}> {post.text}
<button type="submit" onClick={()=> deletePost(post.id)} className =" btn btn-small-primary"> X </button>
</li>
)}
</ul>
);
const mapStateToProps = (state) => {
return { posts: state.posts };
};
const mapDispatchToProps = dispatch => ({
deletePost: id => dispatch(deletePost(id))
})
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
Updated.
**ADD_POST reducer**
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
javascript reactjs react-redux
javascript reactjs react-redux
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
edited Nov 22 '18 at 7:12
BARNOWL
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
asked Nov 22 '18 at 6:49
BARNOWLBARNOWL
4841821
4841821
1
Can you provide a link to the demo?
– Anand Undavia
Nov 22 '18 at 6:53
Or at least show the contents of the array
– Daniel Hilgarth
Nov 22 '18 at 6:53
i updated it. maybe this gives insight.
– BARNOWL
Nov 22 '18 at 7:01
add a comment |
1
Can you provide a link to the demo?
– Anand Undavia
Nov 22 '18 at 6:53
Or at least show the contents of the array
– Daniel Hilgarth
Nov 22 '18 at 6:53
i updated it. maybe this gives insight.
– BARNOWL
Nov 22 '18 at 7:01
1
1
Can you provide a link to the demo?
– Anand Undavia
Nov 22 '18 at 6:53
Can you provide a link to the demo?
– Anand Undavia
Nov 22 '18 at 6:53
Or at least show the contents of the array
– Daniel Hilgarth
Nov 22 '18 at 6:53
Or at least show the contents of the array
– Daniel Hilgarth
Nov 22 '18 at 6:53
i updated it. maybe this gives insight.
– BARNOWL
Nov 22 '18 at 7:01
i updated it. maybe this gives insight.
– BARNOWL
Nov 22 '18 at 7:01
add a comment |
2 Answers
2
active
oldest
votes
1
Well you have a small mistake in your code
The action that you have dispatched is DELETE_POST whereas you expect REMOVE_POST in your code
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
now i get thisCannot read property 'filter' of undefined
– BARNOWL
Nov 22 '18 at 7:08
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
This should becase 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }
– Shubham Khatri
Nov 22 '18 at 7:12
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
|
show 4 more comments
0
This worked for me, thanks you folks for your contributions.
switch(action.type){
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
case 'DELETE_POST':
return state.filter(({ id }) => id !== action.id);
default:
return state
}
}
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
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%2f53425297%2fredux-dispatch-is-not-removing-an-item-from-the-array%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
1
Well you have a small mistake in your code
The action that you have dispatched is DELETE_POST whereas you expect REMOVE_POST in your code
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
now i get thisCannot read property 'filter' of undefined
– BARNOWL
Nov 22 '18 at 7:08
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
This should becase 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }
– Shubham Khatri
Nov 22 '18 at 7:12
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
|
show 4 more comments
1
Well you have a small mistake in your code
The action that you have dispatched is DELETE_POST whereas you expect REMOVE_POST in your code
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
now i get thisCannot read property 'filter' of undefined
– BARNOWL
Nov 22 '18 at 7:08
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
This should becase 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }
– Shubham Khatri
Nov 22 '18 at 7:12
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
|
show 4 more comments
1
1
1
Well you have a small mistake in your code
The action that you have dispatched is DELETE_POST whereas you expect REMOVE_POST in your code
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
Well you have a small mistake in your code
The action that you have dispatched is DELETE_POST whereas you expect REMOVE_POST in your code
case 'DELETE_POST': {
return Object.assign({}, state, {
posts: [...state.posts.filter(post=> post.id !== action.id)],
});
}
default:
return state
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
answered Nov 22 '18 at 7:03
Shubham KhatriShubham Khatri
81.1k1598137
81.1k1598137
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
now i get thisCannot read property 'filter' of undefined
– BARNOWL
Nov 22 '18 at 7:08
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
This should becase 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }
– Shubham Khatri
Nov 22 '18 at 7:12
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
|
show 4 more comments
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
now i get thisCannot read property 'filter' of undefined
– BARNOWL
Nov 22 '18 at 7:08
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
This should becase 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }
– Shubham Khatri
Nov 22 '18 at 7:12
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
thank you, now i have a problem that i can fix.
– BARNOWL
Nov 22 '18 at 7:07
now i get this
Cannot read property 'filter' of undefined– BARNOWL
Nov 22 '18 at 7:08
now i get this
Cannot read property 'filter' of undefined– BARNOWL
Nov 22 '18 at 7:08
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
can you show the ADD_POST reducer
– Shubham Khatri
Nov 22 '18 at 7:11
This should be
case 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }– Shubham Khatri
Nov 22 '18 at 7:12
This should be
case 'ADD_POST': return { ...state, posts: [...state.posts, { id:action.id, text:action.text, } ] }– Shubham Khatri
Nov 22 '18 at 7:12
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
check my comment above, you ADD_POST is also not correct
– Shubham Khatri
Nov 22 '18 at 7:13
|
show 4 more comments
0
This worked for me, thanks you folks for your contributions.
switch(action.type){
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
case 'DELETE_POST':
return state.filter(({ id }) => id !== action.id);
default:
return state
}
}
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
add a comment |
0
This worked for me, thanks you folks for your contributions.
switch(action.type){
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
case 'DELETE_POST':
return state.filter(({ id }) => id !== action.id);
default:
return state
}
}
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
add a comment |
0
0
0
This worked for me, thanks you folks for your contributions.
switch(action.type){
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
case 'DELETE_POST':
return state.filter(({ id }) => id !== action.id);
default:
return state
}
}
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
This worked for me, thanks you folks for your contributions.
switch(action.type){
case 'ADD_POST':
return [
...state,
{
id:action.id,
text:action.text,
}
]
case 'DELETE_POST':
return state.filter(({ id }) => id !== action.id);
default:
return state
}
}
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
answered Nov 22 '18 at 7:40
BARNOWLBARNOWL
4841821
4841821
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%2f53425297%2fredux-dispatch-is-not-removing-an-item-from-the-array%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
Can you provide a link to the demo?
– Anand Undavia
Nov 22 '18 at 6:53
Or at least show the contents of the array
– Daniel Hilgarth
Nov 22 '18 at 6:53
i updated it. maybe this gives insight.
– BARNOWL
Nov 22 '18 at 7:01