EDIT : I made a codesandbox, it's probably much easier that way : https://codesandbox.io/s/serverless-cloud-98fil?file=/pages/index.js

I'm trying to create a Redux slice with an initial value containing all the data from a Supabase table called "residents". My slice is looking like this :

import { createSlice } from "@reduxjs/toolkit";
import { supabase } from "utils/supabaseClient";

async function setInitialValue() {
    const { data, error } = await supabase.from("residents").select();
    return data;
}

export const residentsSlice = createSlice({
    name: "residents",
    initialState: {
        value: setInitialValue(),
    },
    ...
});

export default residentsSlice.reducer;

Then I include this into my store :

import { configureStore } from "@reduxjs/toolkit";
import residentsReducer from "stores/residents";

export default configureStore({
    reducer: {
        residents: residentsReducer,
    },
});

And finally I try to use it on my homepage :

import { useState, useEffect } from "react";
import { supabase } from "utils/supabaseClient";
import { useSelector, useDispatch } from "react-redux";


export default function Home() {
    const [session, setSession] = useState(null);

    const residents = useSelector((state) => {
        return state.residents.value;
    });
    ...
}

If I try console-logging the data object from the setInitialValue() function, it gives me an Array of 10 items (exactly what I expect). But if I log the residents constant from my homepage, then it gives me a Promise with state:fulfilled, but I can't use it.

My guess is that the log on the homepage is happening before the promise gets resolved. What could I do in this case ? I've always had a hard time understanding promises.

Thank you for your help !