Как использовать useSelector для получения данных из RTK Query?

  • 9 ноября 2023 г. 13:28
Ответы на вопрос 2
Для получения данных из RTK Query с помощью `useSelector` из библиотеки react-redux, вы можете использовать селекторы, предоставляемые RTK Query.

Прежде всего, убедитесь, что вы добавили `api.reducerPath` в свой редюсер, чтобы этот срез состояния был доступен внутри `useSelector`. Например:

```javascript
import { configureStore } from '@reduxjs/toolkit';
import { api } from 'your-api-slice';

const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});
```

Затем создайте и экспортируйте собственный селектор, чтобы получить нужные вам данные. Для этого используйте функцию `api.endpoints.[имя_эндпоинта].select`, где `имя_эндпоинта` - это имя вашего эндпоинта в RTK Query. Например:

```javascript
import { useSelector } from 'react-redux';
import { api } from 'your-api-slice';

export const useSomeData = () =>
  useSelector((state) => api.endpoints.someEndpoint.select(state));
```

Теперь вы можете использовать этот селектор в своих компонентах, чтобы получать данные из RTK Query. Например:

```javascript
import React from 'react';
import { useSomeData } from 'path-to-your-selector';

const MyComponent = () => {
  const someData = useSomeData();

  return (
    <div>
      {someData.isLoading && <div>Loading...</div>}
      {someData.error && <div>Error: {someData.error.message}</div>}
      {someData.data && (
        <div>Data: {JSON.stringify(someData.data)}</div>
      )}
    </div>
  );
};

export default MyComponent;
```

Теперь компонент будет отображать нужные данные в зависимости от их состояния (загрузка, ошибка или успешный результат).
Используйте хук `useSelector` для получения любых данных из хранилища Redux. RTK Query автоматически сохраняет результаты в сторе, поэтому не должно возникнуть проблем.
Похожие вопросы