в реакции-редуксе:
Файл 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)}
как я могу получить доступ к данным внутри него?
да, я постараюсь задать этот вопрос лучше, это мой второй раз, когда я все еще понимаю концепцию :)
Я надеюсь, что эти строки кода помогут мне изо всех сил объяснить
По-видимому, вы назначаете объект своей переменной «упражнения». Если вы используете редукцию, там должен быть редуктор, где вы это делаете.
Что-то похожее на это:
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);
}
);
},
});
Привет, не могли бы вы полный код (или, может быть, его упрощенную версию) вместо нескольких строк? Я не уверен, что вы подразумеваете под
excercises = {data: Array(17)}
, вы не должны иметь возможность присваивать объект массиву.