Lecture 11 - Use custom middleware for async actions.

[RuiLopes98]

Hello, guys!

I'm getting this error on the Redux DevTools: error:"Actions must be plain objects. Use custom middleware for async actions."

As you can see, I used thunk in the applyMiddleWare and did import it on the top of the code!

Is this happening with someone?

This is my store.js code:

import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import {productListReducer} from './reducers/productReducers';

const initialState = {};
const reducer = combineReducers ({
    productList: productListReducer,
});

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, initialState, composeEnhancer(applyMiddleware(thunk))); 
export default store; 

And this is my productionActions.js:

import axios from 'axios';

import {
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL,
  } from '../constants/productConstants';

const listProducts = () => async(dispatch) => {
    try {
        dispatch(PRODUCT_LIST_REQUEST);
        const {data} = await axios.get("/api/products");
        dispatch({type: PRODUCT_LIST_SUCCESS, payload: data});
    }

    catch(error) {
        dispatch({type: PRODUCT_LIST_FAIL, payload: error.message});
    }
} 

export {listProducts}

[basir]

it is weird. you use thunk as middleware. did you checm=k your code with my PR for this lesson?

[RuiLopes98]

it is weird. you use thunk as middleware. did you checm=k your code with my PR for this lesson?

I already solved it, I had a typing error in productActions.js: dispatch(PRODUCT_LIST_REQUEST);

And did correct it to: dispatch({type: PRODUCT_LIST_REQUEST});

[sjkadali]

@RuiLopes98 I also had the same issue. Thanks for opening this !