I'm familiar with react hooks, and i find it really easy to work with useEffect, thunk is very difficult to deal with, can i just use useEffect & axios and just dispatch the result to the store without using createAsyncThunk? is there any major performance benefit to use it over useEffect?

createAsyncThunk:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'

import { userAPI } from './userAPI'



// First, create the thunk

const fetchUserById = createAsyncThunk(

  'users/fetchByIdStatus',

  async (userId, thunkAPI) => {

    const response = await userAPI.fetchById(userId)

    return response.data

  }

)



// Then, handle actions in your reducers:

const usersSlice = createSlice({

  name: 'users',

  initialState: { entities: [], loading: 'idle' },

  reducers: {

    // standard reducer logic, with auto-generated action types per reducer

  },

  extraReducers: {

    // Add reducers for additional action types here, and handle loading state as needed

    [fetchUserById.fulfilled]: (state, action) => {

      // Add user to the state array

      state.entities.push(action.payload)

    }

  }

})



// Later, dispatch the thunk as needed in the app

dispatch(fetchUserById(123))

useEffect:

import React, { useEffect } from 'react';

import { useDispatch } from 'react-redux'

import { userAPI } from './userAPI'

import axios from 'axios';

 

function App() {  

const dispatch = useDispatch()

useEffect(() => {

axios

  .get(userAPI)

  .then(response => dispatch({type:'fetchUsers',payload:response.data}));

    }, []);