尽管更新 redux 商店，但仅对 useEffect 挂钩触发一次反应

Question

SImple hook component below, when submitting form it throws exception and useEffect hook triggers and prompts error message fine,

if submit again for some reason useEffect not triggers..

I can assure you submit, action works as expected since I follow up steps with debuggers.. it doesn't step into useEffect after first submit..

component:

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

const { messages, error } = useSelector((state) => state.contact)

  const dispatch = useDispatch()

  useEffect(() => {
    debugger
    if (error) {
      alert(messages)
    }
  }, [error, messages])

  const onSubmitForm = (data) => {
    dispatch(postContact(data))
  }

action:

export const postContact = ({ name, email, website, message }) => async (
  dispatch
) => {
  try {
    dispatch({
      type: CONTACT_POST,
    })
    const response = await axios.post('/contact', {
      data: {
        Name: name,
        Email: email,
        Website: website,
        Message: message,
      },
    })
    dispatch({
      type: CONTACT_POST_SUCCESS,
      payload: response.data,
    })
  } catch (error) {
    debugger
    dispatch({
      type: CONTACT_POST_FAIL,
      error: error.message,
    })
  }
}

reducer:

export default function contact(state = initialState, action = {}) {
  switch (action.type) {
    case CONTACT_POST:
      return {
        ...state,
      }
    case CONTACT_POST_SUCCESS:
      return {
        ...state,
        messages: 'Completed successfully',
        error:false,
      }
    case CONTACT_POST_FAIL:
      debugger
      return {
        ...state,
        messages: action.error,
        error: true,
      }
    default:
      return state
  }
}

Answer 1

Because there is no value change for error & message property. Error value is always assigning as "true". Try listening the entire state itself.

const contactState = useSelector((state) => state.contact)

 useEffect(() => {
    debugger
    if (error) {
      alert(messages)
    }
  }, [contactState ])

Or you need to reset the error value & message on post request

 case CONTACT_POST:
      return {
        ...state, error:false, messages:""
      }