dispatch not doing anything - reactjs

Question

The action dispatch is not working, The function works and I get the console.log but the store isn't changing. Any ideas?
import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import RemoveTodo from './RemoveTodo';
import { remove } from '../actions/Todo';
import { store } from '../app';
class TodosSummary extends React.Component {
constructor(props) {
super(props);
}
onDelete = ({id}) => {
store.dispatch(remove({id}))
console.log(store.getState());
};
render () {
return (
<ul>
{this.props.target.map(({todo, significance, id}) => {
return (
<li
key={id}>{todo} - impact is {significance}
<button onClick={this.onDelete}>Remove</button>
</li>
);
})}
</ul>
</div>
);
}
};
const mapStateToProps = (state) => {
return {
target: state.target
}; };
export default connect(mapStateToProps)(TodosSummary)
This is the action, taking the todo id
export const remove = ({id}) => ({
type: 'REMOVE_TODO',
id
});
And that's the reducer, filtering the state and bringing back the filtered array
const todosReducer = (state = todosReducerDefaultState, action) => {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
action.target
];
case 'REMOVE_TODO':
return (
state.filter(({ id }) => id !== action.id)
);

Answer 1

I see you want to access target property inside state. So, the reducer should be like this:
case 'ADD_TODO':
return {
...state,
target: [...state.target, action.target]
};
case 'REMOVE_TODO':
return {
...state,
target: state.target.filter(({ id }) => id !== action.id)
};
See if this works.

Answer 2

Return updated state like this.
case 'REMOVE_TODO':
return [...state.filter(({ id }) => id !== action.id)];

Answer 3

It's not suggested to change the state directly, please change the addToDo to the following.
Object.assign({}, state, {
todoList: state.target
});
Can you please provide the code snippet for the default state as per your code 'todosReducerDefaultState'?