Redux Toolkit — установка начального состояния с помощью RTK Query

Я пытаюсь установить начальное состояние моего contactSlice.ts с помощью асинхронной функции, используя RTK Query.

Я читал документы и искал в Интернете, но не нашел подходящего решения для этой проблемы.

контактыAPI.ts:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Contact } from '../models/contact.model';

export const contactsApi = createApi({
    reducerPath: "contactsApi",
    baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3006/" }),
    tagTypes: ['Contact'],
    endpoints: (builder) => ({
        contacts: builder.query<Contact[], void>({
            query: () => '/contacts',
            providesTags: ['Contact']
        }),
        contact: builder.query<Contact, string>({
            query: (id) => `/contacts/${ id }`,
            providesTags: ['Contact']
        }),
        addContact: builder.mutation<{}, Contact>({
            query: contact => ({
                url: '/contacts',
                method: 'POST',
                body: contact    
            }),
            invalidatesTags: ['Contact']
        }),
        updateContact: builder.mutation<void, Contact>({
            query: ({id, ...rest}) => ({
                url: `/contacts/${ id }`,
                method: 'PUT',
                body: rest
            }),
            invalidatesTags: ['Contact']
        }),
        deleteContact: builder.mutation<void, string>({
            query: (id) => ({
                url: `/contacts/${ id }`,
                method: 'DELETE',
            }),
            invalidatesTags: ['Contact']
        })
    })
})

export const {
    useContactsQuery,
    useContactQuery,
    useAddContactMutation,
    useUpdateContactMutation,
    useDeleteContactMutation
} = contactsApi;

контактSlice.ts:

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { Contact } from '../models/contact.model';
import type { RootState } from '../store';

// Define a type for the slice state
interface ContactState {
    value: Contact[]
}

// Define the initial state using that type
const initialState: ContactState = {
    value: //enter async function here
}

export const counterSlice = createSlice({
    name: 'contact',
    // `createSlice` will infer the state type from the `initialState` argument
    initialState,
    reducers: {}
})

export default counterSlice.reducer

Я хочу установить значение initialState, используя useContactsQuery из contactAPI.ts, но я не могу понять, как сделать это асинхронно и включить перехват ошибок.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
0
175
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете выполнить это действие, используя дополнительные редьюсеры, как в этом пример.

Хотя вы должны рассмотреть нет, чтобы сделать это для более согласованного Единственный источник правды.

Вместо этого вы должны использовать свой rtk API в качестве хранилища, которое будет аннулировано и обновлено, когда это необходимо, слишком автоматически.

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { Contact } from '../models/contact.model';
import type { RootState } from '../store';

// Define a type for the slice state
interface ContactState {
    value: Contact[]
}

// Define the initial state using that type
const initialState: ContactState = {
    value: //enter async function here
}

export const counterSlice = createSlice({
    name: 'contact',
    // `createSlice` will infer the state type from the `initialState` argument
    initialState,
    reducers: {},
   extraReducers: (builder) => {
      builder.addMatcher(
        api.endpoints.contacts.matchFulfilled,
        (state, { payload }) => {
           state = payload
       }
    )
  },
})

export default counterSlice.reducer

узнать больше:

RTK Query: диспетчеризация внутри запроса или мутации – github

Что именно вы подразумеваете под использованием rtk API в качестве хранилища? Поскольку я также хочу иметь локальный кеш, используя метод contactSlice. И в написанном вами фрагменте кода устанавливается ли состояние при инициализации приложения?

Alon Ben Yaakov 23.04.2022 13:10

Ваш вопрос заключался в том, как это сделать, и для этого фрагмент кода, но рекомендация запроса rtk не должна хранить содержимое API в обычном состоянии.

y.rashi 23.04.2022 13:20

Итак, если я правильно понял - при использовании useContactsQuery() из contactApi он автоматически обновит состояние в contactSlice.ts? Но этот путь не рекомендуется концепцией SSOT. Тогда каков рекомендуемый способ инициировать состояние с помощью асинхронной функции?

Alon Ben Yaakov 23.04.2022 13:48

Да, если вы хотите также создать фрагмент для сохранения контактов, вы можете использовать дополнительные редьюсеры, как в ответе выше.

y.rashi 23.04.2022 14:25

Другие вопросы по теме