使用连接状态更改时，React组件未重新呈现

Question

我正在创建一个todo应用，其中TodoApp是主要组件，其中包含filterLink，一个简单链接和一个VisibleTodoList部分，每当我切换todolist时，它就会更改其状态并重新呈现未使用connect但使用VisibleTodoList（正在使用connect的过滤器组件） ）不重新渲染

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包含

 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包含

  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> 
            )
          }
        }

组合式减速器包含待办事项和可见性减速器

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
})

这是作为动作导入的相应动作创建者

export const toggleTodo=(id)=>{
   return{
             type:'TOGGLE_TODO',
             id:id

            }
}

export const addTodo=(count,val)=>{
    return {
                    id:count,
                    text:val,
                    type:'ADD_TODO'
                }
}