Typy obiektów o dowolnej strukturze

Cześć, uczę się reduxa i mam taki problem:

Mam taki interface:

export interface Request {
  method: string;
  body: any;
}

export interface Respone {
  body: any;
}

export interface Event {
  request: Request;
  response: Respone;
}

Strzelam reduxem do backendu, który zwraca mi taki object Respnse z body z jsonem

"response": {
"body": {
"status": "ok"
}
}
},

Chciałbym, żeby body mogł być dowolnym jasonem. Czy ktoś coś takiego robił?

W tej chwili dostaję taki błąd:

Error: Objects are not valid as a React child (found: object with keys {status}). If you meant to render a collection of children, use an array instead.
▶ 26 stack frames were collapsed.
(anonymous function)
C:/Users/bgora/IdeaProjects/Mockify/frontend/mockify-ui/src/actions/index.ts:28
  25 | return async (dispatch: Dispatch<FecthAction>) => {
  26 |   const response = await events.get(`${path}`);
  27 | 
> 28 |   dispatch({
     | ^  29 |     type: ActionType.FETCH_DATA,
  30 |     payload: response.data,
  31 |   });

Możesz stworzyć sobie interfejsy generyczne, zamiast tego any

export interface Request<T = Record<string, any>> {
  method: string;
  body: T;
}

export interface Respone<T = Record<string, any>> {
  body: T;
}

Ale sama zmiana typu nie naprawi tego błędu, musiałbyś wstawić kod komponentu/reduxa z przykładem użycia

Black007 napisał(a):

W tej chwili dostaję taki błąd:

Error: Objects are not valid as a React child (found: object with keys {status}). If you meant to render a collection of children, use an array instead.
▶ 26 stack frames were collapsed.
(anonymous function)
C:/Users/bgora/IdeaProjects/Mockify/frontend/mockify-ui/src/actions/index.ts:28
  25 | return async (dispatch: Dispatch<FecthAction>) => {
  26 |   const response = await events.get(`${path}`);
  27 | 
> 28 |   dispatch({
     | ^  29 |     type: ActionType.FETCH_DATA,
  30 |     payload: response.data,
  31 |   });

Ale to nie wygląda jak błąd typescriptowy, tylko jakbyś chciał wyrenderować niepoprawny element.