React-Native和Redux“动作必须是普通对象。将自定义中间件用于异步功能”

Question

我遵循了youtube上的教程。 我写的和他写的一样，但是我正面临这个问题

  

错误：动作必须是普通对象。使用自定义中间件进行异步   功能

Store / index.js

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from '../reducers'

export default function configureStore() {
    let store = createStore(
        rootReducer,
        applyMiddleware(thunk)
    );

    return store
}

actions / index.js

import { ADD_TODO, TOGGLE_TODO } from './ActionTypes'

let nextId = 0

export const addTodo = (text) => ({
    type: ADD_TODO,
    id: nextId++,
    text
})
export const toggleTodo = (di) => ({
    type: TOGGLE_TODO_,
    id
})

reducers / index.js

import { combineReducers } from "redux";
import todosReducer from './todosReducer'
import visibiltyReducer from './visibiltyReducer'

const rootReducer = combineReducers({
    todosReducer,
    visibiltyReducer
})

export default rootReducer

reducers / todoreducer.js

import { ADD_TODO, TOGGLE_TODO } from '../actions/ActionTypes'

const todosReducer = (state = [], action) => {

    console.log("TODO Reducer: " + action.type)

    switch (action.type) {
        case ADD_TODO:
            return [
                ...state, {
                    id: action.id,
                    text: action.text,
                    completed: false
                },
            ]
        case TOGGLE_TODO:
            return state.map(todo => (todo.id == action.id) ? { ...todo, completed: !todo.completed } : todo)
        default:
            return state
    }
}

export default todosReducer

App.js

 render() {
      return (
       <View style={styles.container}>
            <Provider store={store}>
                <TodoApp />
            </Provider>
       </View>
     );
 }

使用分派，在分派行显示问题。请帮我弄错地方。

 import React, { Component } from "react";
 import {
     View,
     TextInput,
     StyleSheet,
     TouchableOpacity
 } from "react-native";
 import { Icon } from "native-base";
 import { connect } from 'react-redux'
 import addTodo from '../redux/actions'

 let nextId = 0

 class AddTodo extends Component {

     constructor(props) {
         super(props)
         this.state = {
             text: ''
         }
     }

     addingTodo = (text) => {
         // alert("TODO " + text)
         if (text.length > 0) {
             this.props.dispatch({ type: "ADD_TODO", id: nextId++, text: text })
             // this.props.dispatch(addTodo(text))
             alert("TODO Added")
             this.setState({ text: '' })
         } else alert("Can't add empty")
     }

     render() {
         return (
             <View style={{ flexDirection: 'row', width: '100%' }}>
                 <View style={styles.container}>
                     <TextInput
                         value={this.state.text}
                         placeholder="Add ToDo"
                         onChangeText={(text) => this.setState({ text })}
                         style={{ height: 50, flex: 1, backgroundColor: '#dddddd' }}
                     />
                     <TouchableOpacity
                         onPress={() => this.addingTodo(this.state.text)}>
                         <Icon
                             name='md-add-circle'
                             size={30} style={{ color: '#3456ff', backgroundColor: 'white', borderRadius: 20 }} />
                     </TouchableOpacity>
                 </View>
             </View >
         );
     }
 }
 export default connect()(AddTodo);

 const styles = StyleSheet.create({
     container: {
         marginStart: 10,
         marginEnd: 10,
         width: '100%',
         height: 60,
         alignItems: 'center',
         justifyContent: 'center',
         padding: 15,
         flexDirection: 'row',
         backgroundColor: '#dddddd',
     }
 });