如何解决 react-redux 中的此错误“错误：操作必须是普通对象。使用自定义中间件进行异步操作。”

Posted 2023-02-19

【中文标题】如何解决 react-redux 中的此错误“错误：操作必须是普通对象。使用自定义中间件进行异步操作。”

【英文标题】：How to resolve this error in react-redux "Error: Actions must be plain objects. Use custom middleware for async actions."

【发布时间】：2017-11-19 14:35:31

【问题描述】：

项目的错误是错误：操作必须是普通对象。使用自定义中间件进行异步操作。 我想知道如何解决这个问题。 这是 Store.js 在传递给路由器之前放置配置历史和存储的地方

import applyMiddleware , createStore, combineReducers, compose from 'redux'

import browserHistory from 'react-router'

import syncHistoryWithStore, routerReducer , routerMiddleware from 'react-router-redux'

import composeWithDevTools from 'redux-devtools-extension';

import promise from "redux-promise-middleware"

import  createBrowserHistory  from 'history';


import exercise from './reducers/Exersice'

var reducers = exercises:exercise;

const store = createStore(combineReducers(
    ...reducers,
    routing: routerReducer
), composeWithDevTools( applyMiddleware( routerMiddleware( createBrowserHistory() ), promise() ) ) )

const history = syncHistoryWithStore(createBrowserHistory(), store)

module.exports = 
    store,
    history,
    reducers:()=>
      var exercises = require('./reducers/Exersice');
      var reducers = exercises:exercises;
      return combineReducers(
          ...reducers,
          routing: routerReducer
      )
    

这是动作文件：

//Actions for get courses
import axios from 'axios'

//Get courses by author
export function getExerciseById(author)
  return (context, id) => 
    return 
      type: 'GET_EXERCISE_ID',
      payload: axios.get(window.url_api+'/exercises/'+id,
      headers:'Authorization':'Bearer '+context.props.token),
    
  


export function getExercises()
  return (context, author) => 
    return 
      type: 'GET_EXERCISES',
      payload: axios.get(window.url_api+'user'),
    
  

这是我的减速器

export default(state = , action) => 
  switch (action.type)
    case 'GET_EXERCISE_ID':
      return 
        ...state,
        fetching:false,
        fetched: true,
        data: action.payload
      
      break;
    case 'GET_EXERCISES':
      return 
        ...state,
        fetching:true,
        fetched: false,
        data: action.payload
      
      break;
    default:
      return state
  
  return state

这是我的路由器：

import React, Component from 'react';
import App from './Components/App';
import Provider from 'react-redux'
import Program from './routes/Programs/Program';
import Exercise from './routes/Exercise/Exercise';
import Generations from './routes/Generations/Generation';
import Routines from './routes/Routines/Routine';
import Promos from './routes/Promos/Promo';
import Logout from './routes/Logout';

import 
  BrowserRouter as Router,
  Route
 from 'react-router-dom';

module.exports = (store, history) => 
  return (
    <Provider store=store>
      <Router history=history>
        <div>
          <Route path="/" component=App />
          <Route path="/home" component=App/>
          <Route path="/generaciones" component=Generations/>
          <Route path="/rutinas" component=Routines/>
          <Route path="/ejercicios" component=Exercise/>
          <Route path="/promociones" component=Promos/>
          <Route path="/cerrarsesion" component=Logout/>
        </div>
      </Router>
    </Provider>
  )

【问题讨论】：

请向我们展示一些您尝试调度的操作的代码。

正确格式化您的代码。

我的代码格式正确 :D @AndreyLuiz

【参考方案1】：

首先要上一点词汇课。动作是您要发送的对象。动作创建者是创建动作的函数。您不能将异步代码放入您的操作本身。请求需要在动作创建者函数内部发出，而不是动作对象。

你通过返回一个接受 dispatch 参数的匿名函数向 redux 发出信号，表明你将使用异步代码。然后将调度回调传递给您的匿名函数，并使用它将操作对象发送到状态存储。

你有：

export function getExerciseById(author)
  return (context, id) => 
    return 
      type: 'GET_EXERCISE_ID',
      payload: axios.get(window.url_api+'/exercises/'+id,
      headers:'Authorization':'Bearer '+context.props.token),
    
  

改成：

export function getExerciseById(author)
    return function(dispatch) 
        axios.get(window.url_api+'/exercises/'+id, headers:'Authorization':'Bearer '+context.props.token)
            .then(response => 
                dispatch(
                    type: 'GET_EXERCISE_ID',
                    payload: response.data
                )
            )
    

或者，使用 async 和 await

export const getExerciseById = author => async dispatch => 
    try 
        let response = await axios.get(window.url_api+'/exercises/'+id, headers:'Authorization':'Bearer '+context.props.token);
        dispatch(
            type: 'GET_EXERCISE_ID',
            payload: response.data
        );
     catch (err) 
        console.log(err);