如何修复React-Redux错误:操作必须是纯对象。是否将自定义中间件用于异步操作？我需要澄清这一点

// 正确的action creator
const increment = () => ({
  type: 'INCREMENT'
});

npm install redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

// 异步action creator
const incrementAsync = () => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({
        type: 'INCREMENT'
      });
    }, 1000);
  };
};

npm install redux-saga

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);

// sagas.js
import { takeEvery, put } from 'redux-saga/effects';

function* incrementAsync() {
  yield setTimeout(() => {
    yield put({ type: 'INCREMENT' });
  }, 1000);
}

function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync);
}

export default function* rootSaga() {
  yield watchIncrementAsync();
}

store.dispatch({ type: 'INCREMENT_ASYNC' });