Перейти к основному содержимому

StargateQuery

Что мы узнаем​

Мы узнаем как извлекать данные используя RTK(Redux ToolKit)

Что такое RTK Query​

RTK Query — это расширенный инструмент для выборки и кэширования данных, разработанный для упрощения типичных случаев загрузки данных в веб-приложение.

Установка​

Для установки репозитория проекта необходимо ввести в консоль:

git clone https://github.com/gHashTag/stargate2.git

Далее в папке проекта:

yarn // либо используем npm install

И потом:

npx react-native run-android // или run-ios

Создание службы​

В папке src/store/movieApi вы увидите следующее:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const movieApi = createApi({
  reducerPath: 'movieApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://api.tvmaze.com/search/'
  }),
  endpoints: build => ({
    getMovie: build.query({
      query: name => `shows?q=${name}`
    })
  })
})

export const { useGetMovieQuery } = movieApi

Тут мы используем поисковую систему фильмов от https://api.tvmaze.com, для того чтобы получать о них информацию по ссылке(чтобы лучше понять можете перейти по ссылке: http://api.tvmaze.com/search/shows?q=stargate. Вы увидите массив данных в котором информация о фильмах)

Добавление службы в Store​

Служба RTKQ генерирует «редуктор фрагментов», который должен быть включен в корневой редуктор Redux. И еще специальное промежуточное программное обеспечение, которое обрабатывает выборку данных. Оба должны быть добавлены в магазин Redux.

import { configureStore } from '@reduxjs/toolkit'
import { movieApi } from './movieApi'

export const store = configureStore({
  reducer: {
    [movieApi.reducerPath]: movieApi.reducer
  },
  middleware: getMiddleware => getMiddleware().concat(movieApi.middleware)
})

После ваше приложение должно быть обернуто в <Provider store={store}>

Почти готово​

Теперь вы можете использовать сгенерированный хук useGetMovieQuery в своих компонентах!

import React, { useState } from 'react'
import { View, FlatList, Text } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { EmptyList, Header, ImageCard, Loading, Search } from '../../components'
import { nanoid } from 'nanoid/non-secure'
import { useGetMovieQuery } from '../../store/movieApi'

export function HomeScreen({ navigation }) {
  const [visibleSearch, setVisibleSearch] = useState(false)
  const [filterText, setFilterText] = useState('stargate')

  const { data, error, isLoading } = useGetMovieQuery(filterText) // передаем текст поиска
  function onSearch(text) {
    setFilterText(text ? text : 'stargate')
  }
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {visibleSearch ? (
        <Search
          colorRight={'#fff'}
          iconRight="magnify"
          placeholder="Search"
          value={filterText}
          onSubmit={onSearch}
          onBlur={() => setVisibleSearch(false)}
        />
      ) : (
        <Header
          title={'Search'}
          colorRight={'#fff'}
          iconRight="magnify"
          onPressRight={() => setVisibleSearch(true)}
        />
      )}
      {isLoading ? (
        <Loading />
      ) : data.length === 0 ? (
        <EmptyList />
      ) : (
        <FlatList
          data={data.filter(a => (a?.show?.image?.original ? true : false))}
          numColumns={2}
          ListHeaderComponent={<View style={{ height: 20 }} />}
          ListFooterComponent={<View style={{ height: 100 }} />}
          contentContainerStyle={{ alignItems: 'center' }}
          keyExtractor={() => nanoid()}
          showsVerticalScrollIndicator={false}
          renderItem={({ item, index }) => (
            <ImageCard
              data={item}
              onPress={() => navigation.navigate('DETAIL_SCREEN', { data: item.show })}
            />
          )}
        />
      )}
    </SafeAreaView>
  )
}

Итог​

Мы научились брать удаленные данные с сервера с помощью Redux ToolKit Query!

EnglishMoji!