Как использовать данные, возвращаемые запросом RTK, в срезе в качестве значения по умолчанию/начального состояния?

На чтение 4 мин Опубликовано 23.09.2024

Вопрос или проблема

Я пытаюсь разобраться, как использовать часть данных, возвращаемых запросом RTK, в срезе в качестве состояния по умолчанию.

Предположим, у меня есть эти данные, возвращенные от вызова API, и я использую запрос RTK для получения данных.

const data = {
 имя: "Тестовый сотрудник",
 параметры: {..},
 значки: {..}
возраст: 26,
id: 1,
isEmployee: options && badges  
}

ПРИМЕЧАНИЕ: isEmployee - это либо true, либо false в зависимости от свойств options и badges, которые являются частью возвращаемых данных из API

Я могу использовать эти данные в компоненте, сделав так:

const Employee = () => {
  const {data} = useGetEmployee(null)

  return <div>{data.name}</div>
}

Теперь у меня есть компонент, где мне нужно выполнять условный рендеринг на основе флага isEmployee, вызывая действие toggleEmployee, которое, по сути, переключает флаг isEmployee.

Итак, я создаю срез так:

const initialState = {
    isEmployee: ??? // как установить состояние по умолчанию здесь, поскольку оно зависит от параметров и значков, возвращаемых из запроса RTK
};

export const employeeSlice = createSlice({
    name: "employeeSlice",
    initialState,
    reducers: {
        toggleEmployee: (state, action) => {
            state.isEmployee = action.payload;
        },
    },
});

Я новичок в RTK запросах и пытаюсь понять, как лучше всего/рекомендуется достичь этого. Любая помощь будет оценена, спасибо!

Ответ или решение

Чтобы использовать данные, возвращаемые из RTK Query, в качестве начального состояния в срезе, вам нужно учитывать, что начальное состояние устанавливается при создании среза. Таким образом, у вас не будет доступа к данным, возвращаемым из асинхронного запроса, на этапе инициализации среза. Однако вы можете обновить состояние среза после получения данных.

Вот пример того, как можно решить вашу задачу:

Создайте срез без значения isEmployee, а затем обновите его состояние после получения данных.

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
    isEmployee: false, // Значение по умолчанию, пока не будет обновлено
};

export const employeeSlice = createSlice({
    name: 'employeeSlice',
    initialState,
    reducers: {
        toggleEmployee: (state) => {
            state.isEmployee = !state.isEmployee; // Меняем значение
        },
        setIsEmployee: (state, action) => {
            state.isEmployee = action.payload; // Устанавливаем значение на основе полученных данных
        },
    },
});

export const { toggleEmployee, setIsEmployee } = employeeSlice.actions;

export default employeeSlice.reducer;

Используйте RTK Query в вашем компоненте, чтобы получить данные, а затем обновите состояние среза с помощью нового действия setIsEmployee.

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useGetEmployeeQuery } from './services/employeeApi'; // Предполагаем, что вы уже создали API сервис с помощью RTK Query
import { setIsEmployee } from './employeeSlice';

const Employee = () => {
    const dispatch = useDispatch();
    const { data, error, isLoading } = useGetEmployeeQuery(null); // Запрос к API

    useEffect(() => {
        if (data) {
            const isEmployee = data.options && data.badges ? true : false;
            dispatch(setIsEmployee(isEmployee)); // Обновляем состояние среза
        }
    }, [data, dispatch]);

    if (isLoading) return <div>Загрузка...</div>;
    if (error) return <div>Ошибка при загрузке данных</div>;

    return <div>{data.name}</div>; // Отображаем имя сотрудника
};

export default Employee;

Убедитесь, что вы можете использовать состояние isEmployee в других компонентах. Например, вы можете получать его с помощью useSelector.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { toggleEmployee } from './employeeSlice';

const EmployeeStatus = () => {
    const dispatch = useDispatch();
    const isEmployee = useSelector((state) => state.employee.isEmployee);

    return (
        <div>
            <div>{isEmployee ? "Сотрудник" : "Не сотрудник"}</div>
            <button onClick={() => dispatch(toggleEmployee())}>
                Переключить статус
            </button>
        </div>
    );
};

export default EmployeeStatus;

Таким образом, вы обрабатываете асинхронный запрос для получения данных и обновляете начальное состояние среза по мере их получения. Это обеспечит корректную работу с состоянием в вашем приложении.