ディスパッチは機能ではなく、反応にディスパッチを使用する方法は？

Question

私はすでにReactのtodo Listを作成しましたが、今はReduxを使用してReactの状態を管理したいと思います。私がReactに店舗を出すときには、エラーディスパッチは機能ではありません。具体的には、私は、+ボタンを持って、私は+ボタンをクリックしたときに、私は入力フォームが

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を作成しようとしましたとreduxのドキュメントとしてmapSatetoProps、それでも動作しないので、私は最初のコードに戻りました。私はToDoリストに

example.js（Reduxのはここに書かれている）

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

をより多くの項目を追加したい場合には：私はこのフォーマットディスパッチ（{「TOGGLE_IS_ADDING」タイプ}）などの派遣を使いたいです

この例では、未接続コンポーネントのみをエクスポートしています。接続関数を呼び出すことによって構築している上位コンポーネント（HOC）が消費されていません。

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