我已经开始学习RTQ查询了。例如,我在服务.ts:中有以下设置
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const dataApi = createApi({
reducerPath: 'reducerApi',
baseQuery: fetchBaseQuery({
baseUrl: 'someApiUrl',
}),
endpoints: (builder) => ({
getByName: builder.query({
query: (name: string) => name`,
}),
});
export default dataApi;
然后我在triggerComponent.tsx中使用useLazyQuery钩子来获取点击按钮时的数据,并从如下输入中获取参数:
const TriggerComponent = () => {
const [inputValue, setInputValue] = useState<string>('');
const { useLazyGetByNameQuery } = dataApi;
const [trigger] = useLazyGetByNameQuery();
const handleClick = () => {
void trigger(inputValue);
};
return (
<input
label="Search"
value={inputValue}
onChange={(event) => setInputValue(event.target.value)}
/>
<button onClick={handleClick}>
Search
</button>
)
然后我想在另一个组件中访问这些数据,但我的问题来了。我不知道如何从创建的存储中获取提取的数据。在ReduxDevTools中,我可以看到数据当然是正确提取的。有什么建议吗?
您有几个选项:
- 在拥有此数据的组件中调用相同的查询。并通过提供第二个参数来启用缓存,请参阅文档
- 或者创建选择器并从查询结果中进行选择。文档中有一些示例