EDITAR: hice un codesandbox, probablemente sea mucho más fácil de esa manera: https://codesandbox.io/s/serverless-cloud-98fil?file=/pages/index.js
Estoy tratando de crear una porción de Redux con un valor inicial que contenga todos los datos de una tabla de Supabase llamada "residentes". Mi rebanada se ve así:
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;Luego incluyo esto en mi tienda:
import { configureStore } from "@reduxjs/toolkit"; import residentsReducer from "stores/residents"; export default configureStore({ reducer: { residents: residentsReducer, }, });Y finalmente trato de usarlo en mi página de inicio:
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; }); ... }Si intento registrar en la consola el objeto de datos de la función setInitialValue(), me da una matriz de 10 elementos (exactamente lo que espero). Pero si registro la constante de los residentes desde mi página de inicio, entonces me da una Promesa con el estado: cumplida, pero no puedo usarla.
Supongo que el inicio de sesión en la página de inicio se realiza antes de que se resuelva la promesa. ¿Qué podría hacer en este caso? Siempre me ha costado entender las promesas.
Gracias por tu ayuda !