using axios with reducer / context / provider

I'm using useEffect to make an api call to set initialState, then pass it to "todo" with useReducer

code here:

export function TodoProvider({children}){

  const apiUrl = "http://localhost:3001/home";

  const [initialState,setInitialState] = useState([]);

  useEffect(()=>{
    axios.get(apiUrl)
    .then((response)=>{
        setInitialState(response.data.data);
    })
    .catch(e=>console.log(e))
  },[]);

  console.log(initialState);

  const [todo, dispatch] = useReducer(todoReducer, initialState);


  return (
      <TodoContext.Provider value={todo}>
        <TodoDispatchContext.Provider value={dispatch}>
            {children}
        </TodoDispatchContext.Provider>
      </TodoContext.Provider>
    )
  }

but todo isn't getting the value of initialState, does anyone know what am i doing wrong here?

is it because useReducer() only gets the first time value from initialState? is there a different way to do it?

and in the inspector in chrome
that one console.log(initialState) prints these:

thank you in advance

The issue seem to be caused due to the initialState passed to useReducer staying as an empty array.

You can update the state and reducer declaration as:

  const [initialState, setInitialState] = useState(null);

  const [todo, dispatch] = useReducer(todoReducer, initialState || []);

and conditionally render, as:

  if (initialState === null) {
    return <div>Loading...</div>;
  }

  return (
    <TodoContext.Provider value={todo}>
      <TodoDispatchContext.Provider value={dispatch}>
        {children}
      </TodoDispatchContext.Provider>
    </TodoContext.Provider>
  );

Full code:

export function TodoProvider({ children }) {
  const apiUrl = "http://localhost:3001/home";

  const [initialState, setInitialState] = useState(null);

  useEffect(() => {
    axios
      .get(apiUrl)
      .then((response) => {
        setInitialState(response.data.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);


  const [todo, dispatch] = useReducer(todoReducer, initialState || []);


  if (initialState === null) {
    return <div>Loading...</div>;
  }

  return (
    <TodoContext.Provider value={todo}>
      <TodoDispatchContext.Provider value={dispatch}>
        {children}
      </TodoDispatchContext.Provider>
    </TodoContext.Provider>
  );
}