Javascript 此错误消息的目的是什么？动作必须是普通对象。使用自定义中间件进行异步操作

actionTypes.js

export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';
export const SET_INGREDIENTS = 'SET_INGREDIENTS';
export const FETCH_INGREDIENTS_FAILED = 'FETCH_INGREDIENTS_FAILED';

burgerBuilder.js/actions

export const setIngredients = (ingredients) => {
    return {
        type: actionTypes.SET_INGREDIENTS,
        ingredients: ingredients
    };
};

export const fetchIngredientsFailed = () => {
    return {
        type: actionTypes.FETCH_INGREDIENTS_FAILED
    };
};

export const initIngredients = () => {
    return dispatch => {
        axios.get('/ingredients.json')
            .then(response => {
                dispatch(setIngredients(response.data))
            })
            .catch(error => {
                dispatch(fetchIngredientsFailed())
            });
    };
};

burgerBuilder.js/reducer

case actionTypes.SET_INGREDIENTS:
     return {
         ...state,
         ingredients: action.ingredients,
         error: false
     };
case actionTypes.FETCH_INGREDIENTS_FAILED:
     return {
         ...state,
         error: true
     };

BurgerBuilder.js/containers

componentDidMount () {
    this.props.onInitIngredients();
}


//Some Code...


const mapStateToProps = state => {
    return {
        ings: state.ingredients,
        price: state.totalPrice,
        error: state.error
    }
};

const mapDispatchToProps = dispatch => {
    return {
        onIngredientAdded: (ingName) => dispatch(burgerbuilderActions.addIngredient(ingName)),
        onIngredientRemoved: (ingName) => dispatch(burgerbuilderActions.removeIngredient(ingName)),
        onInitIngredients: () => dispatch(burgerbuilderActions.initIngredients())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(BurgerBuilder, axios));

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import {BrowserRouter} from 'react-router-dom';
import thunk from 'redux-thunk';
import burgerBuilderReducer from './store/reducers/burgerBuilder';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ || compose;

const store = createStore(burgerBuilderReducer, composeEnhancers(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </Provider>
);

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从'react redux'导入{Provider}；
从'redux'导入{createStore，applyMiddleware，compose}；
从“react router dom”导入{BrowserRouter}；
从“redux thunk”导入thunk；
从“/store/reducers/burgerBuilder”导入burgerBuilderReducer；
const composeinhancers=window.uuu REDUX_DEVTOOLS_uuextension_uuu124; | compose；
const store=createStore（burgerBuilderReducer，composeEnhancers(
applyMiddleware（thunk）
));
常量应用=(
);

当我在一个演示项目中工作时，我遇到了这个错误“操作必须是普通对象。使用自定义中间件进行异步操作”。我不知道，但我觉得这个错误来自burgerBuilder.js/action文件中的initComponents（）。

---

我是新来的

似乎代码当前已被破坏， 您可以通过更改来解决此问题：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ || compose;

const store = createStore(burgerBuilderReducer, composeEnhancers(
    applyMiddleware(thunk)
));

与：

---

请告诉我们您是如何开设店铺的。看起来您打算使用redux thunk中间件，它允许您分派函数，但显然redux thunk设置不正确@NicholasTower是的很抱歉！我添加了index.js文件

const store = createStore(
  rootReducer,
  //composeEnhancers(applyMiddleware(thunk)) // => NOTE: This would break the code!
  // Thisone instead will work fine...
  compose(
    applyMiddleware(
      thunk
      // Other middlewares
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Chrome debugger
  )
);