调度不是一个函数，如何在调度中使用？

Question

我已经创建了React的todo List，现在我想用Redux来管理React的状态。当我将一个商店派遣到React时，我得到了错误派遣不是一个函数。更具体地讲，我得到了A +按钮，当我点击+按钮，我想输入的形式展现出来

TodoInput.js

import React, {Component} from 'react'; 
import '../App.css'; 
import {connect} from 'react-redux' 

export default class InputTodo extends Component{ 


    // Using ref instead of onChange attribute 
    // handleChange=(event)=>{ 
    //   this.setState({value:event.target.value});  
    // } 

    handleSubmit=(e)=>{ 
     if(this.refs.title.value===''){ 
      alert('You must input something'); 
     } 
     else{ 

     } 
     e.preventDefault(); 

    } 

    showInput=()=>{ 
     var {dispatch}=this.props; 
     dispatch({type:'TOGGLE_IS_ADDING'}); 
    } 

    render(){ 
     if(this.props.isAdding){ 
      return(
       <form className='input-group' onSubmit={this.handleSubmit}> 
        <input type='text' ref="title" className='form-control'placeholder={this.props.todoText}/> 
        <span className='input-group-btn'> 
        <input type='submit' value='Submit' className='btn btn-primary' /> 
        </span> 
       </form> 
      ); 
     } 
     return(
      <button className='btn btn-info' onClick={this.showInput}>+</button> 
     ); 

    } 
} 


// function mapDispatchToProps(dispatch){ 
//  return({ 
//   toggleAdding:()=>{dispatch({type:'TOGGLE_IS_ADDING'})} 
//  }) 
// } 
// function mapStateToProps(state){ 
//  return {isAdding: state.isAdding} 
// } 


connect(function(state){ 
    isAdding:state.isAdding 
})(InputTodo); 

在注释行，我试图创建mapDispatchtoProps和mapSatetoProps作为redux文档，但它仍然不起作用，所以我回到了第一个代码。我想用派遣这样的格式讯（{类型：“TOGGLE_IS_ADDING”}）的情况下，我想更多的项目添加到待办事项列表

example.js（终极版在这里写的）

import {createStore,compose,combineReducers} from 'redux'; 

var defaultTodoState={ 
    todos:[ 
     {id:0,text:'Make dinner'}, 
     {id:1,text:'Fold the laundry'}, 
     {id:2,text:'Do homework'} 
    ] 
} 

var todoReducer=(state=defaultTodoState.todos,action)=>{ 
    switch (action.type) { 
     case 'ADD_ITEM': 
      return [...state, action.item] 
     case 'REMOVE_ITEM': 
      return state.filter((e,i)=>i!==action.id)  
     default: 
      return state; 
    } 
} 

var isAddingReducer=(state=false,action)=>{ 
    switch (action.type) { 
     case 'TOGGLE_IS_ADDING': 
      return !state 
     default: 
      return state; 
    } 
} 

var reducer=combineReducers({ 
    activities:todoReducer, 
    isAdding: isAddingReducer 
}); 

// create devTool 
var store=createStore(reducer, compose(
    window.devToolsExtension ? window.devToolsExtension() : f=>f 
)); 

store.subscribe(()=> console.log(store.getState())); 

store.dispatch({type:'TOGGLE_IS_ADDING'}); 

// console.log(store.getState()); 

store.dispatch({ 
    type: 'ADD_ITEM', 
    item:{ 
     id:3, 
     text:'Prepare lunch' 
    } 
}); 
// console.log(store.getState()); 

store.dispatch({ 
    type:'REMOVE_ITEM', 
    id:2 
}) 
// console.log(store.getState()); 


console.log('Hello from example'); 
export default store; 

Answer 1

在您的示例中，您只导出未连接的组件。您正在通过调用connect函数构建的高阶组件（HOC）未被占用。

export default connect(function(state){ 
    isAdding:state.isAdding 
})(InputTodo);