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

如果我很了解你，我想你会为如何使用异步函数而苦恼。

您可以轻松使用 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));

Answer 2

所以你想要一个带有动态 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 可用。

Redux Toolkit 查询和预取一些数据

Redux Toolkit Query and pre fetching some datas

javascript

reactjs

redux

redux-toolkit