Redux Saga- return the result to callee function instead of dispatching new action

Question

I am moving my react project to redux & redux-saga. Initially, I was calling an async method to get large data sets and then I was setting it in my local state, something like this:

// Component.jsx
componentDidMount() {
   const dataPromise = this.getTableData()
   const data = await dataPromise
   this.setState({ data })
}

getTableData = async() => {
   const response = await APIUtils.getTableData()
   let data = null
   if (response && response.code === "200") {
      data = response.data
   }
   return data
}

Now with redux, I am changing it like this

// Component.jsx
componentDidMount() {
  const data = this.props.getTableData() // how to get data here?
  this.setState({ data })
}

// ActionCreator.js
function getTableData() {
   return {
     type: "GET_TABLE_DATA"
   }
}

// saga.js
function *getTableData() {
   try {
        const response = yield call(APIUtils.getTableData)
        ...
        // here I want to send this response.data to my comp without calling store action as the dataset is large and it is read-only.

    } catch (err) {
        yield put(showError(false))
    }
}

export default function* root() {
  yield all([
    takeLatest("GET_TABLE_DATA", getTableData)
  ])
}

I am new to redux-saga, anyone tell me what is the best way to do it.

Answer 1

You need to dispatch an action that will update your store. Then you connect your component to the store and get data from the store.