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和mapSatetoProps作为redux文档，但它仍然不起作用，所以我回到了第一个代码。我想使用像这种格式调度（{type：'TOGGLE_IS_ADDING'}）的调度，以防我想在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

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

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

dispatch不是一个函数，如何使用dispatch in react？

1 个答案: