Как useCallback передает новый стейт в кастомный хук в данном случае?

Question

[Vann Damm]

Есть "кастомный" хук useAction, который возвращает другой хук, а он в свою очередь диспатчит данные в редакс стор.
Суть вопроса такова: Как хук, который находится в теле моего функционального компонента, дает доступ(передает) в хук полученный при вызове кастомного хука, который стоит в массиве зависимостей в хуке функционального компонента , новые данные из локального стейта(menuState)? Как я понимаю у хука функциональном компоненте есть доступ к menuState(очевидно) , но как его получает actionCreator , просто как из контекста его берет ? или полностью перезапись происходит переменной const actionCreator = useAction(changeMenuState,{menuState:!menuState},menuState); ?
Функциональный компонент:

export const MenuBtn = (props) => {
	const [menuState,setMenuState] = useState(false);
 	const getMenuState = useSelector((state) => state.menu.menuState);
	useEffect(()=>{
 	   setMenuState(getMenuState);
 	},[getMenuState]);
 	const actionCreator = useAction(changeState,{menuState:!menuState},menuState);
	const changeMenuState = useCallback((elem)=>{
 		actionCreator()
 	},[actionCreator])
	
	return (<div>
</div>)

Кастмный хук:

export const useAction = (action, data, deps = null) => {
  const dispatch = useDispatch();
  const actionCreator = useCallback(()=>{
    dispatch(action({...data}))
  },deps? [deps] : [dispatch])
  return actionCreator;
};

Answer 1

[Евгений Щербаков]

Как хук, который находится в теле моего функционального компонента, дает доступ(передает) в хук полученный при вызове кастомного хука, который стоит в массиве зависимостей в хуке функционального компонента , новые данные из локального стейта(menuState)?

Так Вы сами передаете значение menuState во втором параметре useAction
{menuState:!menuState}

Или я не понял вопроса :(

Comments

[Vann Damm]

В принципе поняли. Да , я передаю его, но если я actionCreator не оберну в useCallback и не поставлю actionCreator в его массив зависимостей, то мой кастомный хук , не получит в замыкание новое значение menuState. А с помощью того что я его оборачиваю useCallback - он получает новые значения. Так вот, новое значение menuState actionCreator получает когда он вызывается в useCallback

useCallback((elem)=>{
 		actionCreator()
 	},[actionCreator])

Или же когда новые значения получаются при переопределении или перерендере , не знаю как назвать ,

const actionCreator = useAction(changeState,{menuState:!menuState},menuState);

А простым языком так: где и как actionCreator получает новое значение menuState

[Евгений Щербаков]

Vann Damm, Так подождите, Вы передаете menuState в зависимости useCallback, который находится внутри useAction.
Понятное дело, что при смене menuState Вам придет новый actionCreator на основе этого.

[Vann Damm]

Евгений Щербаков, Хорошо, придёт новый actionCreator. Но как это происходит(понятно что меняется menuState и появляется новый actionCreator). Но если капнуть глубже. Я так понимаю: useCallback в который обернут actionCreator понимает, что он у его в массиве зависимостей, а у actionCreatorá в массиве зависимостей menuState факт, и он такой ага раз actionCreator прилетает из кастомного хука, обновлю ка я это значение,

const actionCreator = useAction(changeState,{menuState:!menuState},menuState);

так?

[Евгений Щербаков]

Vann Damm,

раз actionCreator прилетает из кастомного хука, обновлю ка я это значение,

Извините, но вот это не понял. При чем тут откуда он прилетает? И какое значение Вы имеете ввиду обновляется?
Если я правильно понимаю Вас, то там по идее работает обычное замыкание.

[Vann Damm]

Евгений Щербаков, Все , спасибо. Понял суть . Надо было чуть с другой стороны подумать

[Vann Damm]

Vann Damm, Подскажи пожалуйста если знаешь. Как отписать от получения этих данные из редакс-стора при размонтировании. Те что хуком useSelector достаю

const [menuState,setMenuState] = useState(false) 
	const getMenuState = useSelector((state) => state.menu.menuState);
	useEffect(()=>
	setMenuState(getMenuState)
	,[getMenuState]);

[Евгений Щербаков]

Vann Damm, а какую проблему Вы пытаетесь решить?

[Vann Damm]

Евгений Щербаков, При размонтировании продолжают данные эти запрашиваться, они там как раз меняются и вылетает ошибка.

Погуглил , там только отписка для фетч запросов ...

[Евгений Щербаков]

https://www.debuggr.io/react-update-unmounted-comp....

https://stackoverflow.com/questions/53949393/cant-...

Думаю должно помочь :)

[Vann Damm]

Евгений Щербаков, Все таки придется разбираться) думал так сходу ответишь) . Просто хотел позже размонтированием занятся, но спасибо)