프로젝트의 주요 기능은 Action에 작성하여 제공되는 함수들에 의해 동작한다. 한번 프론트단에서 필요한 동작을 마친 다음에는 프로그램의 제어권이 dispatch를 통해 Action으로 넘어가게 된다.

특정 동작을 마친 다음에 다른 페이지로 이동하는 기능을 구현하기 위해서는 어떻게 해야하는가? 이를 프론트단에 구현하려면 Action으로 넘어간 제어권을 다시 받아와야 한다. 굳이 그래야하는 이유가 있다면 다른 방법을 찾아야겠지만 그렇지 않다면 그냥 Action에서 동작을 마친다음 거기서 페이지가 이동되도록 기능을 구현해버리면 된다.

1. 그런데 그게 안되네?

Action 내부에서는 여러가지 이유로 navigate을 선언할 수 없다.

1. Action.js 내부 최상단에 navigate 선언.
   -> React Hook "useNavigate" cannot be called at the top level 에러!
   -> navigate는 컴포넌트가 아니라 Hooks의 일종이므로 리액트 컴포넌트 내부에서만 선언이 가능하다.

2. Action 생성함수 내부에서 navigate 선언.
   -> React Hook "useNavigate" cannot be called inside a callback 에러!
   -> 1번과 비슷한 이유. Hooks는 콜백함수 내부에서 선언할 수 없다.

그렇다면 어떻게 해야하는가?

2. 이러면 되지!

프론트단의 컴포넌트에서 navigate을 선언한 다음에 dispatch를 통해 Action을 호출할 때 인자로 넘겨주면 된다.

export const StoreMain = () => {

	const navigate = useNavigate();

	const go = () => {
		dispatch(action(navigate));
	};
    
};

(...)

process()
	.then(() => {
    	dispatch({ type: 'COMPLETE' });
		navigate('/main', { replace: true });
	})
    

이러면 Action 내부에서도 navigate를 통해 페이지를 이동시킬 수 있다!