React component not re-rendering on state change with connect - reactjs

Question

I am creating a todo app where TodoApp is the main Component which contain filterLink a simple link and a VisibleTodoList section, whenever I toggle the todolist it changes its state and re render the filter component which is not using connect but VisibleTodoList(which is using connect) is not re render
class TodoApp extends Component {
render(){
return (
<div className="App">
<input ref={node =>{
this.input=node;
}}/>
<button onClick={
()=>{
store.dispatch(actions.addTodo(count++,this.input.value));
}
}>Add Todo</button>
<FilterLink filter='SHOW_ALL' store={store.getState()}/>
<FilterLink filter='ACTIVE' store={store.getState()}/>
<FilterLink filter='COMPLETED' store={store.getState()}/>
<VisibleTodoList/>
</div>
);
}
}
VisibleTodoList contain
const getVisibleTodos= (visible,todo)=>{
switch(visible){
case 'ACTIVE':
return todo.filter((item)=>item.completed === false)
case 'COMPLETED':
return todo.filter((item) => item.completed === true);
default :
return todo;
}
}
const mapStateToProps=(state)=>({
todo: getVisibleTodos(state.visiblity,state.todo)
})
const mapDispatchToProps=(dispatch)=>{
return {
onTodoClick:(id)=>{
dispatch(actions.toggleTodo(id));
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoItem)
TodoItem contain
class TodoItem extends Component {
render(){
return(
<ul>
{this.props.todo.map((item)=>
<TodoList key={item.id} {...item} onTodoClick={this.props.onTodoClick}
/>
)}
</ul>
);
}
}
TodoList contain
class TodoList extends Component {
render(){
console.log(this.props)
const {id,text,completed,onTodoClick} =this.props;
return (
<li
style={{textDecoration:completed?'line-through':''}}
onClick={()=>onTodoClick(id)}>{text}</li>
)
}
}
The combine reducer contain todo and visiblity reducer
function visible(state='SHOW_ALL',action){
switch(action.type){
case 'VISIBLITY_FILTER':return action.filter;
default:return state;
}
}
index.js(reducer)
function todo(state=[],action){
switch(action.type){
case 'ADD_TODO':
return[
...state,{
id:action.id,
text:action.text,
completed:false
}
];
case 'TOGGLE_TODO':
let t= state.map(item =>{
if(item.id === action.id){
item.completed =!item.completed;
}
});
return state;
default: {
return state;
}
}
}
const todos=combineReducers({
todo,
visiblity
})
This is the corresponding action creator which is imported as actions
export const toggleTodo=(id)=>{
return{
type:'TOGGLE_TODO',
id:id
}
}
export const addTodo=(count,val)=>{
return {
id:count,
text:val,
type:'ADD_TODO'
}
}