Cannot destructure property react.js useSelector

Question

I have an error Cnnot destructure property 'status' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(...)' as it is undefined.

I'm trying to handle errors that come from the server with "toast" But when I wrote this code in RegisterPage.jsx, the page doesn't even open for me.

RegisterPage.jsx

const { status } = useSelector(state => state.auth )

    useEffect(() => {
        if (status) {
            toast(status)
        }
    }, [status])

store.js

export const store = configureStore({
    reducer:{
        auth: authSlice
    },
})

authSlice.js

const initialState = {
    user: null,
    token: null,
    isLoading: false,
    status: null,
}

Answer 1

You can solve this by doing the following

const auth = useSelector(state => state.auth )

    useEffect(() => {
        if (auth?.status) {
            toast(auth?.status)
        }
    }, [auth?.status])

Most likely you are running react in strict mode and it renders twice/multiple times in strict mode. So, At first render you receive undefined at the end of these render you get the correct values.

Also, It runs twice/multiple times to detect side effects for you, it can help you spot errors by making it a little more deterministic.