el código se ejecuta correctamente mientras se cumple el caso de extraReducer isLoading's state no se usa El componente SearchForm no está escrito completamente, solo lo que se necesita para comprender el problema
const fetchMovies = createAsyncThunk( 'movies/fetchMovies', async (movieTitle) => { const newMovies = await searchApi.findMovie(movieTitle) return newMovies } ) extraReducers: (builder) => { builder .addCase(fetchMovies.pending, (state, action) => { state.isLoading = true }) .addCase(fetchMovies.fulfilled, (state, action) => { state.isLoading = false // running an infinite loop } }) import { fetchMovies } from '../../redux/slices.js/moviesSlice' export function SearchForm() { const dispatch = useDispatch() // movies default value useEffect( () => { dispatch(fetchMovies('Titanic')) }, []) return ( <form> <input></input> <button></button> </form> ) }Su código aún está muy incompleto. No tengo idea de por qué estás usando useEffect para buscar las películas. Debido a la forma en que se presenta su componente SearchForm , supongo que el usuario busca el título de una película, lo envía y luego se envía la acción de buscar las películas en función del título.
Entonces, en ese escenario, usar useEffect no es apropiado y debe usar una función para manejar el envío.
import { useState } from "React" const SearchForm = () => { const [input, setInput] = useState(""); const handleSubmit = (e) => { e.preventDefault(); if (!input) return; dispatch(fetchMovies(input)); } return ( <form onSubmit={handleSubmit}> <input value={input} onChange={(e) => setInput(e.target.value)}></input> <button type="submit">Search</button> </form> ) }Resulta que estoy tratando de renderizar condicionalmente de la siguiente manera:
export default function HomePage() { return( {isLoading ? <Preloader /> : <Routing /> } ) }como supongo que no es correcto renderizar de esta manera