when trying to console.log a piece of (an array) managed with @reduxjs/toolkit it is always either undefined or proxy.
when using import { original } from "immer";
and console.log(original(state.theArrayImTryingToLog));
I simply get: undefined.
when using console.log(state.theArrayImTryingToLog);
I get:
0: Proxy
[[Handler]]: null
[[Target]]: null
[[IsRevoked]]: true
length: 1
This is logged when the array initially defined as an empty array or even when I set a dummy object in it.
I read in other posts that this might be an Immer issue, but since I always get undefined / proxy I suspect it might be something else.
Also when console.log(JSON.stringify(state.theArrayImTryingToLog));
I get the correct array with all of its elements.
import { createSlice } from "@reduxjs/toolkit";
import { getProducts } from "../api/product.api";
import { original } from "immer";
const productsSlice = createSlice({
name: "products",
initialState: {
products_in_cart: [],
},
reducers: {
add_to_cart: (state, action) => {
console.log(state.products_in_cart); -> proxy as above
console.log(original(state.products_in_cart)); -> undefined
console.log(JSON.stringify(state.products_in_cart)); -> correct array as string
},
},
});