Versand ist keine Funktion, wie wird der Versand in der Reaktion verwendet?

Question

Ich habe bereits eine Todo-Liste nach React erstellt, jetzt möchte ich Redux verwenden, um Reacts Zustände zu verwalten. Wenn ich einen Store an React verschicke, habe ich die Fehlermeldung bekommen, dass es keine Funktion ist. Um genauer zu sein, ich habe eine Taste +, wenn ich auf + klicken, I das Eingabeformular will zeigen, bis

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

In den Kommentarzeilen, habe ich versucht, mapDispatchtoProps zu erstellen und mapSatetoProps als Redux-Dokumentation, aber es funktioniert immer noch nicht, also kam ich zu den ersten Codes zurück. Ich mag Versand wie dieses Format Versand verwenden ({type: 'TOGGLE_IS_ADDING'}) im Fall, dass ich weitere Elemente in der To-do-Liste hinzuzufügen

example.js (Redux ist hier geschrieben)

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

In Ihrem Beispiel exportieren Sie nur die nicht verbundene Komponente. Die Komponente Higher Order (HOC), die Sie durch Aufrufen der Verbindungsfunktion erstellen, wird nicht verbraucht.

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