для чего это сообщение об ошибке? Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий - PullRequest
0 голосов
/ 27 октября 2019

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. Я новичок в реакции!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...