fetching data using redux - reactjs

Question

I'm new to redux and I'm trying to fetch some data in my slice file, then put it in my state to use it across my app.
so I read the documentation in redux website. it says:
"Let's start by adding a thunk that will make an AJAX call to retrieve a list of posts. We'll import the client utility from the src/api folder, and use that to make a request to '/fakeApi/posts'."
and the code is:
import { createSlice, nanoid, createAsyncThunk } from '#reduxjs/toolkit'
import { client } from '../../api/client'
const initialState = {
posts: [],
status: 'idle',
error: null
}
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
const response = await client.get('/fakeApi/posts')
return response.data
})
so now I'm confused. How can I create the client file to use it?
and then, how can I save it in my state to re-use it?
it would be a huge help if you guide me!

Answer 1

Oh yeah now i understand what you want, client is just like fetch, i assume they are using axios , then in client.js file they are exporting axios at the end.
An example, client.js file:
import axios from "axios";
export const client = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
Then import it whereever you want:
import { client } from '../../api/client'
But you can also use axios directly without creating any instances .
As i said before you may use fetch instead, or any other http request package, but actually with axios you have more power and you can easily find a lot of documentations

Answer 2

You can get your reducer state with the use of useSelector and make sure
you write correct reducer state name instead of counter.
const count = useSelector((state) => state.counter.value);
You can dispatch your action by useDispatch hook and make sure you write correct action name instead of decrement.
const dispatch = useDispatch();
dispatch(decrement())
import of this two hooks
import { useSelector, useDispatch } from 'react-redux';
You can save your api response in posts state like this:
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async ()
=> {
const response = await client.get('/fakeApi/posts')
state.posts = response.data
})
Full demo example of redux-toolkit: https://github.com/priyen27/redux-toolkit-demo

Answer 3

thanks for these answers. so I used it and now I get this error:
XHR failed loading: GET "https://excuser.herokuapp.com/v1/excuse"
that's the api link I want.
I used fetch as well and it worked correctly, but I don't know how to store it's data in my state. I used this function:
export async function fetchMyAPI() {
let response = await fetch(`https://excuser.herokuapp.com/v1/excuse`)
let data = await response.json()
return data[0].excuse
}
when I use it in my component and at the end I set is to some const it works perfect. but when I use it directly (like setData(fetchMyAPI())) it returns a promiss and I can't access data. what should I do? how can I store it in my state?
note that I fetch data in my slice component.
my final get api function:
const fetchExcuses = createAsyncThunk('excuses/fetchExcuses', async () => {
const response = await client.get('excuser.herokuapp.com/v1/excuse')
let data = await response.json()
})