Why to do I get error: Actions must be plain objects. Use custom middleware for async actions.?

Question

I am trying to get redux working with my application, but there is the problem with me getting error: Actions must be plain objects. Use custom middleware for async actions.

I am new to redux, as I saw the problem is usually because people did not use applyMiddlewear, but I did it and do not understand why my code keeps getting this mistake.

My action that is probably getting mistake:

export function wordsAreFetching(bool){
return{
    type: 'WORDS_ARE_FETCHING',
    areFetching: bool
}



export function wordsFetchData(parsed) {
return (dispatch) => {
    dispatch(wordsAreFetching(true));

    fetch('APICALL(here is url actually)', {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },body: JSON.stringify({
            words: parsed
        })
    })
        .then((response) => {
            if (!response.ok) {
                throw Error(response.statusText);
            }

            dispatch(wordsAreFetching(false));

            return response;
        })
        .then((response) => response.json())
        .then((items) => dispatch(wordsFetchDataSuccess(items)))
        .catch(() => dispatch(wordsHasErrored(true)));
};
console.log(this.props.items)
}

My combine reducers file:

export default combineReducers({
word,
wordsAreFetching,
wordsFetchHasErrored
});

My store creation:

export default function configureStore(initialState) {
return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
);
}

How I call:

const mapStateToProps = (state) => {
return {
    items: state.items,
    hasErrored: state.wordsFetchHasErrored,
    areFetching: state.wordsAreFetching
};
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (parse) => dispatch(wordsFetchData(parse))
    };
 };

componentDidMount = () => {
       this.props.fetchData(this.state.filterArray);
    }

Possibly this post will help you https://stackoverflow.com/questions/47541032/handling-async-request-with-react-redux-and-axios/47588228#47588228 — Shubham Khatri, May 13 '19 at 12:56

score 0 · Answer 1 · answered May 15 '19 at 00:50

You have mess in your code.

Redux has following main parts:

Actions which should be plain objects having type property. Actions can be created using action creators. Action creators just return action (plain objects). Or you can use bound action creators which also dispatches, like wordsFetchData.

As of your code following functions should be acion creators:
- wordsAreFetching(bool)
- wordsFetchData
- wordsFetchDataSuccess
- wordsHasErrored
Reducers accepts state and action and return state. I don't see any reducer in your code.

This call is incorrect

export default combineReducers({
    word,
    wordsAreFetching,
    wordsFetchHasErrored
});

All above function are action creators and shouldn't be placed in combineReducers call.

mapDispatchToProps should look like

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (parse) => wordsFetchData(parse)(dispatch)
    };
};

As wordsFetchData returns fucntion which takes dispatch as argument.

Why to do I get error: Actions must be plain objects. Use custom middleware for async actions.?

1 Answers1