Use Redux Thunk and RTKQuery together

Question

I am working on big admin dashboard project, with lots of API calls and state managements, Our theme is ready and we are using next.js 13 instead of just react for better development and easy routing control (also SSR and other features...),

for State management we are/will use Redux toolkit for sure.

now my question is, we are thinking like we will use redux store as our local DB, like we will call API from component(like dispatch(get_all_users())....) using AsyncThunk and will update store with our database response. and use that data to show in component using useSelector(like const userdata = useSelector(state => state.users.data) )

which is fine for our work flow.

now problem is, thunk will only get the data, but not caching and other facilities like RTKQuery provides.

so CAN I create custom fuction like fetchHandler() which use RTKQuery to fetch API call data and return it to Redux thunk from where we store all data in redux store and use it app wide.

like

==== my thunk ===

const getAllProductCategories = createAsyncThunk('categories/getAllProductCategories', async () => {
  apiOptions.method = 'POST'
  apiOptions.data = {}

  try {
    const res = await fetchHandler(apiURL.getAllProductCategoriesEndpoint, apiOptions)

    return res.payload
  } catch (err) {
    console.log('getAllProductCategories throw an error -->', err)

    throw err
  }
})

or for update data to DB

const updateProductCategory = createAsyncThunk('categories/updateProductCategory', async ({ activeEdit, data }) => {
  apiOptions.method = 'PATCH'
  apiOptions.data = data

  try {
    const res = await fetchHandler(apiURL.updateProductCategoryEndpoint + '/' + activeEdit, apiOptions)

    // ! remove this later
    console.log('updateProductCategory res -->', res)

    return res.payload
  } catch (err) {
    console.log('updateProductCategory throw an error -->', err)

    throw err
  }
})

==== my fetchHandler() ======

import axios from 'axios'

const fetchHandler = async (url, options) => {

  const data = await axios(url, options)
    .then(async res => {
      const response = await res.data

      return response
    })
    .catch(async error => {
      console.log('response--> fetchhandler', await error)
    })

  return data
}

export default fetchHandler

like I am just using Axios to fetch data, can I replace AXIOS with RTKQuery so we can keep our workflow same and also leverage the caching and other things provided by RTKQuery?

NOTE: code I am pasting is for demo purpose only to show how we are flowing data from BD to component.

Need help.

score 1 · Answer 1 · answered Feb 22 '23 at 14:56

1

Replacing all that thunk code is why RTK Query exists in the first place :)

Generally, if you're doing data fetching with Redux, you should use RTK Query to do all that work, and that means you don't need to write any thunks to do that data fetching. (In fact, RTK Query is built using createAsyncThunk inside.)

Note that RTK Query does save all that cached data in the Redux store already. If you need to access the same data in multiple components, call the same useGetSomeDataQuery()-type hook in each component, with the same query args.

answered Feb 22 '23 at 14:56

markerikson

63,178
10
141
157

1

Thank you, this feels some real thing, also I had no idea that RTKQ store cached in store, and that was the main confusion for me, now if I have access if store with only RTKQ, I am not going to use it 'with' thunk. my only concern was accessibility of store data with caching feature, and I think its solved. -> Just for my personal knowledge: can we use thunk and query together like I was intended to.? I mean no w I know there is no need for that but for knowledge, what if I do that? will it cause issues?, any performance issues? etc... – Cypher or KJ Feb 23 '23 at 05:16
Entirely depends on what you mean by "use them together" :) You can use thunks for some things, and RTK Query for others. All of that is _just_ Redux code. The real question is what you want to use each of them _for_. If you need to fetch user data or posts or comments, and you fetch that via RTK Query, there's no need to write any thunks to do any of that, because you already solved that problem with RTKQ. – markerikson Feb 24 '23 at 01:36

Use Redux Thunk and RTKQuery together

1 Answers1