如何在反应冗余"Error: Actions must be plain objects. Use custom middleware for async actions."中解决此错误

Question

项目的错误是错误：操作必须是普通对象。使用自定义中间件执行异步操作。我想知道热来解决这个问题。这是存储.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>
  )
}

Answer 1

先上

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

您通过返回一个接受调度参数的匿名函数来向 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
                })
            })
    }
}

或者，使用异步和等待

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);
    }
}