Error in ReduxToolkit can't handle API error

Question

I have a API for weather app I am trying to connect it's correctly but I was test it by enter wrong values in input field I get error but can't resolve this error when enter wrong data

Error like this:

in Dashboard.js:55 Uncaught TypeError: Cannot read properties of undefined (reading '0')

and

Consider adding an error boundary to your tree to customize error handling behavior.

you can check all code from here

extra reducer

export const getDataReducer = createAsyncThunk('weatherData/getData', async (args, thunkAPI) => {
    const { rejectWithValue } = thunkAPI;
    try {
        const data = await axios.get(`https://api.worldweatheronline.com/premium/v1/weather.ashx?key=${api_key}&q=${args.country}&format=json&num_of_days=5`, {
    headers: {...}
  })
        .then(res => res.data)
        .catch(e => console.log("fetchError",e))
        console.log('new new new',data)
        return data
    } catch (error) {
        return rejectWithValue(error.message)
    }
})

Slice

[getDataReducer.pending]: (state, action) => {
            state.isLoading = true
        },
        [getDataReducer.fulfilled]: (state, action) => {
            state.isLoading = false
            state.error = false
            state.getData = action?.payload?.data
        },
        [getDataReducer.rejected]: (state, action) => {
            state.isLoading = false
            state.error = true
            state.getData = action?.payload?.data
        },

redux call

const [country, setCountry] = useState(undefined)
const {getData: APIData ,isLoading} = useSelector(state => state.getDataSlice)
    useEffect(() => {
        dispatch(getDataReducer({country}))
    },[dispatch, country])

any help, please

Alpfreda · Accepted Answer · 2022-05-30 18:45:48Z

1

This error occurred due to request is undefined

<WeatherInfo
          isLoading={isLoading}
          city={APIData && APIData.request ? APIData.request[0]?.query?.split(',')[0] : ''}
          country={APIData && APIData.request ? APIData.request[0]?.query?.split(',')[1] : ''}
          latitude={latitude}
          longitude={longitude}
        />
        <Temp
          isLoading={isLoading}
          celsius={APIData && APIData.current_condition ? APIData.current_condition[0]?.temp_C : ''}
          fahrenheit={APIData && APIData.current_condition ? APIData.current_condition[0]?.temp_F : ''}
          weatherStatus={APIData && APIData.current_condition && APIData.current_condition[0].weatherDesc ? APIData.current_condition[0].weatherDesc?.value : ''}
          ForC={ForC}
          setForC={setForC}
        />

This is how I changed the code, but you can repost it to cleaner code.

I changed also in the codesandbox.

https://codesandbox.io/embed/quiet-browser-qiqtm7?fontsize=14&hidenavigation=1&theme=dark

best.

answered May 30, 2022 at 18:45

Alpfreda

3961 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed Radi Over a year ago

Thank you very much, my brother, and your effort. You are great. I want to warn you that the link you added is the same as mine. You can correct it. And thank you very much with all my heart

Collectives™ on Stack Overflow

Error in ReduxToolkit can't handle API error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related