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>
);
У меня появилась эта ошибка "Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий", когда я работал над демонстрационным проектом. Я не знаю, но я чувствую, что эта ошибка происходит из initIngredients () в файле burgerBuilder.js / action. Я новичок в реакции!