如何利用Redux-thunk调度功能

Question

我尝试使用Redux-thunk来调度函数，但是获取错误的操作必须是普通的对象。使用自定义中间件进行异步操作

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')
);

动作

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());
    }
}

组件

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

我不明白，请帮帮忙

Answer 1

在applyMiddleware中需要更改window.__REDUX_DEVTOOLS... <->

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