useEffect только если состояние изменилось

Question

У меня есть useEffect, который вызывает action из redux для выборки закачек

useEffect(() => {
    getUploads()
}, [getUploads])

Однако я хочу получать только при изменении состояния, а не при каждом отображении компонента. Я сопоставил состояние как:

{filteredUploads.map((image, i) => { return (...) })}

Я попытался добавить getUploads, filteredUploads, filteredUploads.length в качестве массива зависимостей. Ничего из этого не сработало.

Мой redux-action:

export const getUploads = () => async dispatch => {
    try {
        dispatch({ type: 'LOADING', payload: true })

        const res = await axios.get('/uploads/myuploads')
        dispatch({
            type: GETMYUPLOAD_SUCCESS,
            payload: res.data
        })

    } catch (err) {
        const error = err.response.data.error[0].msg

        dispatch(setAlert(error, 'danger'))
    }
}

mapStatetoProps:

function mapStateToProps(state) {
    const { myuploads, searchField } = state.useruploads;
    return {

        searchField: state.useruploads.searchField,

        filteredUploads: myuploads.filter((upload) => upload.caption.toLowerCase().includes(searchField.toLowerCase()))
    };
}

Answer 1

Чтобы вызывать хук useEffect при обновлении состояния, просто включите соответствующие переменные состояния в массив зависимостей useEffect.

По адресу useEffect, вызываемому при каждом рендеринге компонента: это происходит потому, что getUploads переопределяется при каждом рендере. Чтобы это исправить, вы можете использовать useDispatch redux hook. Это вместо (и предполагается, что вы в настоящее время используете) mapDispatchToProps.

Вот полный пример:

import { useDispatch } from 'react-redux'
import { getUploads } from "./redux-actions";


const MyComponent = props => {
    const dispatch = useDispatch();

    const [state, setState] = React.useState({});

    useEffect(() => {
        dispatch(getUploads());
    }, [dispatch, state]);

    // rest of component
}