未捕获的错误：操作必须是普通对象。 使用自定义中间件进行异步操作。 即使我在redux中使用compose

Question

I am trying to get some data from api call in redux:

import {createStore,combineReducers,compose,applyMiddleware} from "redux"
import math from "./reducers/mathReducer"
import user from "./reducers/userReducer"
import thunk from "redux-thunk"

const store = createStore(
        combineReducers({
                user,math
            }),
        {},
        compose(applyMiddleware(thunk))
        );
export default store;

The fetch data code is:

export function setName()
{
    fetch('http://localhost/login.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
        },
    })
    .then(response => response.json())
    .then( (response) => {
        return {
            type:'SET_NAME',
            payload: response.name
        };
    })
    .catch( (error) => {
        console.warn('Actions - fetchJobs - recreived error: ', error)
    })


}

I am getting issue:

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

What am I doing wrong?

Answer 1

Changing actions to use dispatch solved the above issue:

export function setName(name)
{
    console.log("Inside setName.");
    return dispatch =>
    {
        fetch('http://localhost/login.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then( (response) => {
            dispatch({
                type:'SET_NAME',
                payload: response.name
            });

        })
        .catch( (error) => {
            console.warn('Actions - fetchJobs - recreived error: ', error)
        })

    }   
}