CODEWITHSUNDEEP
reactjsreduxredux-toolkitredux-thunkrtk-query
Cypher or KJ
Cypher or KJ

Reputation: 71

Use Redux Thunk and RTKQuery together

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.

Upvotes: 0

Views: 1061

Answers (1)

markerikson
markerikson

Reputation: 67547

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.

Upvotes: 1

Related Questions