Работа с массивом TypeScript в React Redux

в реакции-редуксе:

Файл API, возвращает данные из БД:

import axios from "axios";

const URL = "http://127.0.0.1:8000/GetAllExercises/";

export function GetAllExercies(){
    return new Promise((resolve) => 
    axios.get(URL).then((res)=> resolve({data: res.data})))
}

Slice File, вызывая асинхронную функцию и устанавливая полезную нагрузку в varibale-упражнения:

import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState, AppThunk } from "../../app/store";
import { GetAllExercies } from "../API/GetAllExercisesAPI";

export interface CounterState {
  exercieses: string[];
  status: "idle" | "loading" | "failed";
}

const initialState: CounterState = {
  exercieses: [],
  status: "idle",
};

export const GetAllExerciesAsync = createAsyncThunk(
  "get_all_exercises/GetAllExercies",
  async () => {
    const response = await GetAllExercies();
    return response;
  }
);

export const GetAllExerciesSlice = createSlice({
  name: "get_all_exercises",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(GetAllExerciesAsync.pending, (state) => {
        state.status = "loading";
      })
      .addCase(
        GetAllExerciesAsync.fulfilled,
        (state, action: PayloadAction<any>) => {
          state.status = "idle";
          console.info(action.payload);
          state.exercieses = action.payload;
     -->  console.info(state.exercieses);
        }
      );
  },
});

export const selectExercises = (state: RootState) => state.get_all_exercises.exercieses;
export default GetAllExerciesSlice.reducer;

в строке со стрелкой я получаю это в отладчике консоли (f12):

{data:Array(17)}

как я могу получить доступ к данным внутри него?

Привет, не могли бы вы полный код (или, может быть, его упрощенную версию) вместо нескольких строк? Я не уверен, что вы подразумеваете под excercises = {data: Array(17)}, вы не должны иметь возможность присваивать объект массиву.

h8moss 01.02.2023 21:13

да, я постараюсь задать этот вопрос лучше, это мой второй раз, когда я все еще понимаю концепцию :)

Omri ben shushan 01.02.2023 21:15

Я надеюсь, что эти строки кода помогут мне изо всех сил объяснить

Omri ben shushan 01.02.2023 21:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

По-видимому, вы назначаете объект своей переменной «упражнения». Если вы используете редукцию, там должен быть редуктор, где вы это делаете.

Что-то похожее на это:

const { response } = action.payload
return {...state, exercises:response.data}
Ответ принят как подходящий

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

export const GetAllExerciesSlice = createSlice({
  name: "get_all_exercises",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(GetAllExerciesAsync.pending, (state) => {
        state.status = "loading";
      })
      .addCase(
        GetAllExerciesAsync.fulfilled,
        (state, action: PayloadAction<any>) => {
          state.status = "idle";
          // data is inside action.payload
          state.exercieses = action.payload.data;
          console.info(state.exercieses);
        }
      );
  },
});

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

Добавление перегрузки к функции setState, когда она передается дочернему элементу
Настройка домашней страницы для приложения React-Admin на основе разрешений
Как получить пользователей из базы данных, используя переменную, отличную от идентификатора пользователя
Содержимое компонента React не отображается или не найдено
Делаем ли мы с flushSync() внутри useEffect то же самое, что и с useLayoutEffect?
Если внимательно присмотреться, между коробками будних дней есть небольшие линии или промежутки. Эти линии или пробелы присутствуют в Chrome, но не в Firefox
Запретить вставку VS Code IntelliSense = {} после имени функции
При распространении prevstate хука React useState я получаю сообщение об ошибке: должен иметь метод «[Symbol.iterator]()», который возвращает iterator.ts
У меня есть определенное количество кнопок, нажатие на одну из которых должно отображать содержимое только для нее в компоненте React
UseEffect для прокрутки вниз не работает