CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-toolkit
Ahmed Radi
Ahmed Radi

Reputation: 787

Error in ReduxToolkit can't handle API error

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

Upvotes: 0

Views: 344

Answers (1)

Alpfreda
Alpfreda

Reputation: 397

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.

Upvotes: 1

Related Questions