Working with Array TypeScript in React Redux

Question

in react-redux:

API file, returnes data from DB:

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, calling the async function and setting the payload to the varibale- exercises:

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.log(action.payload);
          state.exercieses = action.payload;
     -->  console.log(state.exercieses);
        }
      );
  },
});

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

at the line with arrow i get this at the console debugger(f12):

{data:Array(17)}

how can i accesses the data inside of it?

Answer 1

Apparently you are assigning an object to your "exercieses" variable. If using redux there should be a reducer where you do this.

Something similar to this:

const { response } = action.payload
return {...state, exercises:response.data}

Answer 2

If you want access the data duting setting state then you can simply access data from payload

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.log(state.exercieses);
        }
      );
  },
});