React и RTK Query — новый лёгкий путь для redux?

			// slice
// Используем enum со статусами чтобы легко манипулировать ими в дальнейшем
enum EOperationStatus {
  initial = "initial",
  pending = "pending",
  error = "error",
  success = "success",
}

const initialState: IBotInitialState = {
  items: [],
  itemsStatus: EOperationStatus.initial,
};

export const itemsSlice = createSlice({
  name: "items",
  initialState,
  reducers: {
    getItems: state => {
      state.itemsStatus = EOperationStatus.pending;
    },
    setItems: (state, {payload}: PayloadAction) => {
      state.items = payload;
    },
    setItemsStatus: (
      state, { payload}: PayloadAction,
    ) => {
      state.itemsStatus = payload;
    },
    ...

// api
const getItems = async () => await HttpHandler.get("/items");
export const API = {
  getItems, 
};

// saga
function* getItemsSaga() {
  try {
    const res = yield* call(API.getItems);
    yield* put(itemsSlice.setItems(res));
    // На простых запросах нам постоянно нужно будет писать одно и тоже:
    // сохраняем результат и обновляем статусы.
    yield* put(itemsSlice.setItemsStatus(EOperationStatus.success));
  } catch (e) {
    yield* put(itemsSlice.setItemsStatus(EOperationStatus.error));
  }
}

// selector
// Теперь нам понадобится 2 селектора
export const itemsSelector = selector(s => s.items);
export const itemsStatusSelector = selector(s => s.itemsStatus);

// Component.tsx
export const Component = () => {
  const items = useSelector(itemsSelector);
  const itemsStatus = useSelector(itemsStatusSelector);
  
  if(itemsStatus === EOperationStatus.initial || 
     itemsStatus === EOperationStatus.pending){
       return 'loading';
     }
     return <>{items.map(el => {el.id})}
}
		

			// rtk
interface IItem {
  id: number;
}

const apiWithTags = rtkApi.enhanceEndpoints({});

export const itemsRtkApi = apiWithTags.injectEndpoints({
  endpoints: (build) => ({
    getItems: build.query<
    IItem[],
    undefined>({
      query: () => ({
        url: `/items?client=true`,
      }),
      async onQueryStarted(_, { queryFulfilled }) {
        try {
          await queryFulfilled;
        } catch (_e) {
          noop();
        }
      },
      keepUnusedDataFor: 0,
    }),
  }),
});

// Component
...
  const { data, isError, isFetching, isLoading, status,
   error, refetch } = itemsRtkApi.useGetItemsQuery(
    undefined,
    {refetchOnMountOrArgChange: true}
  );
...
		

			// Component.tsx
export const Component = () => {
  const { data: items, isError, isFetching } = itemsRtkApi.useGetItemsQuery(
    undefined,
    {refetchOnMountOrArgChange: true}
  );
  
  if(isFetching){
     return 'loading';
   }
  if(isError){
     return 'isError';
   }
   return <>{items.map(el => {el.id})}
}
		

			// Component.tsx
export const Component = () => {
  const [fetchItems, 
  {isFetching, {isError, data: items, isUninitialized}] = itemsRtkApi.useLazyGetItemsQuery();
  
  useEffect(() => {
    fetchItems()
  }, [])
  
  if(isFetching || isUninitialized){
     return 'loading';
   }
  if(isError){
     return 'isError';
   }
   return <>{items.map(el => {el.id})}
}
		

			// rtk
...
updateItems: build.mutation({
  queryFn: async ({ param }, api, _extraOptions, baseQuery) => {
    const { data, error } = (await baseQuery(`/items/?param=${param}`)) as QueryReturnValue<
      IItem[],
      FetchBaseQueryError
    >;

    if (error) {
      return { error };
    }

    api.dispatch(
      itemsRtkApi.util.updateQueryData('getItems', undefined, (draft) => {
        return Object.assign(draft, data, [...(draft|| []), ...(data|| [])] });
      })
    );

    return { data };
  },
}),
...