Ошибка: действия должны быть простыми объектами. Используйте пользовательское промежуточное программное обеспечение для действий asyn c. Приложение ToDo

Question

Я проверил много блогов, но ни один не помог мне решить эту ошибку. Может кто-нибудь объяснить, почему я получаю эту ошибку и средства правовой защиты. Я новичок в редуксе. Я следовал всем командам, данным видео на YouTube. В этом видео он нигде не использует рассылку. Можете ли вы также сказать мне, где использовать отправку. src / index. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {Provider} from 'react-redux'
import {createStore} from 'redux';
import reducers from './reducer/'
import App from './App';
import * as serviceWorker from './serviceWorker';

const store=createStore(reducers);

ReactDOM.render(
<Provider store={store}>
  <App />
</Provider>
  ,
  document.getElementById('root'));
serviceWorker.unregister();

действие / индекс. js

const addTask=(task)=>{
  return{
    type:'ADD_TASK',
    payload:task
  }
}
const deleteTask=(taskId)=>{
  return{
    type:'DELETE_TASK',
    payload:taskId
  }
}
export  {addTask,deleteTask};

задача / индекс. js

import React from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {addTask} from '../../actions/'
import {deleteTask} from '../../actions/'

class Task extends React.Component{
  render(){
    return(
      <tr>
      <td>
      {this.props.task1}
      </td>
      <td>
      <button onCLick={()=> this.props.dispatch(deleteTask(this.props.id))}>delete</button>
      </td>
      </tr>
    )
  }
}
function mapDispatchToProps(dispatch){
  return (bindActionCreators({deleteTask},dispatch))
}
export default connect(()=>{},mapDispatchToProps)(Task)

панель задач / index. js

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {addTask} from '../../actions/index'
class Taskbar extends React.Component{
  render(){
    return(
      <div>
      <input type="text" ref="task" placeholder="add your task" />
      <button onClick={()=>this.props.dispatch(addTask(this.refs.task.value))}> ADD TASK</button>
      </div>
    );
  }
}
function mapDispatchToProps(dispatch){
  return bindActionCreators({addTask},dispatch);
}
export default connect(()=>{},bindActionCreators)(Taskbar) ;

список задач / index. js

import React from 'react';
import {connect} from 'react-redux';
import Task from '../task';
class Tasklist extends React.Component{
  render(){
    return(
      <div>
      <table>
      <thead>
      <tr>
      <th>Tasks</th>
      <th>Actions</th>
      </tr>
      </thead>

      <tbody>
      {this.props.tasks.map((t,i)=> <Task key={i} task1={t} />)}
      </tbody>
      </table>
      </div>
    );
  }
}
function mapStateToProps (state){
return{  tasks: state.tasks
};
}
export default connect(mapStateToProps)(Tasklist);

Answer 1

Информация об ошибке, с которой вы сталкиваетесь:

Используйте пользовательское промежуточное ПО для асинхронных c действий.

Следуйте за ним и добавьте applyMiddleware к вашему createStore.

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

(async () => {
  const preloadStore = {
  };

  const store = createStore(
    reducer,
    preloadStore,
    composeWithDevTools(
      applyMiddleware(thunk)
    )
  );
..