dispatch 不是函数，如何在 react 中使用 dispatch？

Question

我已经通过 React 创建了一个待办事项列表，现在我想使用 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 和 mapSatetoProps 作为 redux 文档，但它仍然不起作用，所以我回到了第一个代码。我想使用这种格式的调度 dispatch({type:'TOGGLE_IS_ADDING'}) 以防我想向待办事项列表添加更多项目

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

在您的示例中，您仅导出未连接的组件。您通过调用 connect 函数构建的高阶组件 (HOC) 不会被消耗。

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