My state change (dispatch) is working everywhere in my app. My reducer is has logs all over so I can see it’s not being called…

My fast API is returning a 403 if an animation name is already taken, I’m just trying to change my app state if a 403 is returned (should be easy 🙂

Any ideas? I’ve trying removing strict mode and same result.

Thanks!

import React, { useEffect } from 'react';
import { useStateContext } from '../context/stateContext';
import { useFormData } from '../context/FormDataContext';
import { 
  NEW_ANIMATION_API_STATE, 
  NEW_ANIMATION_API_LOADING_SUB_STATE, 
  NEW_ANIMATION_API_NAME_TAKEN_SUB_STATE 
} from '../states/stateConstants';

const ApiNewAnimation = () => {
  const { state, dispatch } = useStateContext();
  const { formData } = useFormData();
  const apiUrl = import.meta.env.VITE_API_BASE_URL;

  useEffect(() => {
    // Ensure state.currentSubState is not null before accessing its properties
    if (
      state.currentState === NEW_ANIMATION_API_STATE && 
      state.currentSubState && 
      state.currentSubState.name === NEW_ANIMATION_API_LOADING_SUB_STATE &&
      formData.animationName && 
      formData.password
    ) {
      console.log('*******apiNewAnimation*******'); // This is a placeholder for the actual API call
      console.log('Animation Name:', formData.animationName);
      console.log('Password:', formData.password);

      // Make your API call here using formData.animationName and formData.password
      fetch(`${apiUrl}/animations/new-animation-v2`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(
          { 
            animation_name: formData.animationName,
            password: formData.password
          }
        )
      })
      .then(response => {
        if (response.status === 403) {
          console.log('Name already taken.');
          dispatch({
            type: 'CHANGE_SUB_STATE',
            payload: NEW_ANIMATION_API_NAME_TAKEN_SUB_STATE
          });
          return;
        }
        return response.json();
      })
      .then(data => {
        if (data) {
          console.log('API response:', data);
        }
      })
      .catch(error => console.error('API error:', error));
    }
  }, [state.currentState, state.currentSubState, formData.animationName, formData.password, dispatch]);

  return null; // This component does not render anything visible
};

export default ApiNewAnimation;

removing strict mode, tried axios, all same result…