React组件不会通过connect重新呈现状态更改

Question

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

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

联合收割机减速机包含todo和visiblity reducer

function visible(state='SHOW_ALL',action){
    switch(action.type){

case 'VISIBLITY_FILTER':return action.filter;

default:return state;
    }


}

index.js（减速器）

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