Redux Toolkit 查询和预取一些数据

Question

我正在使用 Redux Toolkit Query 从 Audius 服务器获取数据。该服务基于许多 IPFS 节点，最佳实践是查询在特定时刻向其发送 API 请求的性能最佳的服务器。这是 Audius API 文档建议使用的函数来找到正确的服务器：

const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  var host = await fetch('https://api.audius.co')
    .then(r => r.json())
    .then(j => j.data)
    .then(d => sample(d))

我需要从此函数获取 url 并将其输入到我使用 createApi 方法的函数中。
我将该函数包装在一个异步函数中，因为它使用了await，但我被困在了 Promise 中。

async function getHost() {
  const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  var host = await fetch('https://api.audius.co')
    .then(r => r.json())
    .then(j => j.data)
    .then(d => sample(d))
} 

我不知道如何获取这个函数的结果，我知道如何使用 React 组件，使用 useState Hook，但我不想在这里使用它，因为我认为它会减慢进程。
我试图了解如何使用createAsyncThunk，但我无法理解它。
其余代码如下所示：

const contentProvider = `https://discoveryprovider2.audius.co`
const audiusVersion = `/v1`
const appName = `app_name=ZION`
const baseUrl = contentProvider + audiusVersion
const section = [`/users`, `/playlists`, `/tracks`]
const search = `/search?query=`

export const audiusApi = createApi({
  reducerPath: 'audiusApi',
  baseQuery: fetchBaseQuery({ baseUrl: `${baseUrl}` }),
  endpoints: (builder) => ({
    // SEARCH USERS
    // https://discovery-a.mainnet.audius.radar.tech/v1/users/search?query=Brownies&app_name=EXAMPLEAPP
    searchUsers: builder.query({
      query: (searchQuery) => `${section[0]}${search}${searchQuery}${appName}`
    }), 
.........})
  }),
})



export const {
  useSearchUsersQuery,
  useGetUserQuery,
  useGetUsersFavTracksQuery,
  useGetUsersRepostsQuery,
  useGetUserMostUsedTagsQuery,
  useGetUserTracksQuery,
  useSearchPlaylistQuery,
  useGetPlaylistQuery,
  useGetPlaylistTracksQuery,
  useSearchTracksQuery,
  useTrendingTracksQuery,
  useGetTrackQuery,
  useStreamTrackQuery
} = audiusApi

所以基本上我需要将async 函数= 的结果放置到contentProvider。
我试着简单地做

var response = getHost() // my async function

var contentProvider = response

但这并没有通过
希望有人能帮我解决这个问题 =)。

Answer 1

所以你想要一个带有动态baseUrl 的 baseQuery。

我们在文档中有一个example on a baseQuery that uses Redux state for the baseUrl。

这仍然意味着，您必须将 baseUrl 放入商店。

调整来自the Redux Essentials tutorial的示例：

export const getHost = createAsyncThunk('host/getHost', async () => {
  const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  return fetch('https://api.audius.co')
    .then(r => r.json())
    .then(j => j.data)
    .then(d => sample(d))
})

const hostSlice = createSlice({
  name: 'host',
  initialState: null,
  reducers: {
  },
  extraReducers(builder){
    builder.addCase(getHost.fulfilled, (state, action) => {
      return action.payload
    }
  }
})

然后你把你的hostSlice.reducer插入configureStore：

const store = configureStore({
  reducer: {
    host: hostSlice.reducer
// more stuff you had before
  }
})

并发送 thunk：

dispatch(getHost())

然后，您的主机将在您调整后的 baseQuery 中通过 getState().host 可用。

Answer 2

如果我理解你的话，我认为你对如何使用异步函数感到困惑。

您可以轻松使用async await。

async function getHost() {
  const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  var host = await fetch('https://api.audius.co');
  var json = await host.json();
  var data = await json.data;
  var d = await sample(data);
  
  return d;
} 

你可以这样称呼它

var result = await getHost();
 
  result.
    then(d => console.log(d));