How dispatch function with Redux-thunk

Question

I try dispatch function with Redux-thunk, but get error Actions must be plain objects. Use custom middleware for async actions

index.js

import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { App } from './components/App'
import reducer from './services/store/reducer';


const store = createStore(reducer,
  compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    applyMiddleware(thunk)
  )
)

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

action

export const getTicketsData = () => async (dispatch) => {
    dispatch(setLoadingStatus());
    const { searchId } = await getSearchID();
    dispatch(setSearchID(searchId));
    try {
        const { tickets, stop } = await getTickets(searchId);
        dispatch(addTicketsData(tickets));
        dispatch(setLoadedStatus());
        dispatch(allTicketsLoaded(stop));
    } catch (error) {
        console.log(error)
        dispatch(serverError());
    }
}

component

    useEffect(() => {
        dispatch(getTicketsData());
    }, []);

I don't understand, help please

Answer 1

in index.js need change applyMiddleware <-> window.__REDUX_DEVTOOLS...

const store = createStore(combineReducers(rootReducer()),
  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
)