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组件，使用useStateHook，但我不想在这里使用它，因为我认为这会减慢过程
我试着理解如何使用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。

我们有一个baseQuery的例子，它使用Redux状态作为文档中的baseUrl。

这仍然意味着，您必须将baseUrl放入存储中。

调整Redux Essentials教程中的示例：

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

如果我很了解你，我认为你很难理解如何使用异步函数。

您可以轻松使用CCD_ 11。

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));