fetching data using redux-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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()
    })