Why can't my saga listen to action, but reducer can?

create store

import React from "react"
// import ReactDOM from "react-dom"
import { createStore, applyMiddleware } from "redux"
import createSagaMiddleware from "redux-saga"
import rootSagas from "./rootSagas"
import rootReducers from "./rootReducers"

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
    rootReducers,
    applyMiddleware(sagaMiddleware)  // 
  )
  sagaMiddleware.run(rootSagas) 
export default store


create saga

import { takeEvery, takeLatest } from "redux-saga/effects"
function* incrementAsync() {
    debugger
    console.log(999999999999)
    yield delay(1000)
    console.log(999999999999)
    yield put({ type: "INCREMENT" })
  }

function* rootSagas() {
    console.log("=====>rootSagas")
    yield* takeEvery("INCREMENT_ASYNC", incrementAsync)
}
export default rootSagas;   


execute code

componentDidMount(){
        this.initPage()
    }
    initPage = () => {
        console.log("initPage","uuu")
        const { dispatch } = this.props
        const action = type => dispatch({type})
        action("INCREMENT_ASYNC")
        
        // // debugger
        // console.log(initPage_action("222"),"=======>dispath")
        // dispatch(initPage_action("222"))
    }-sharp-sharp-sharp 

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Apr.11,2021
Menu