Question

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

Answer 1

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

通过返回带有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并等待

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

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

1 个答案: