react gatsby에서 발생한 에러입니다

요약

gatsby build시에 하나의 파일안에 <Provider store={store}>를 선언하고 바로 useDispatch를 하면 에러가 난다.

에러 메세지

WebpackError: TypeError: Cannot destructure property 'store' of 'useReduxContext(...)' as it is null.

---

에러 상황

에러가 발생한 파일

└src/pages/profile.tsx

import { Provider, useDispatch, useSelector } from "react-redux";
import store, { Dispatch } from "../state/createStore";
export default function Profile() {
		const dispatch = useDispatch<Dispatch>(); // 여기에서 에러가 발생함.
		{/* ... */}
	return (
		
    	<Provider store={store}>
			{/* 렌더링 하는 많은 코드들.. */}
		</Provider>
     )
}

---

해결

아래와 같이 2개의 파일로 분리 하여 수정

└src/pages/profile.tsx

import { Provider } from "react-redux";
import store from "../state/createStore";
import ProfileComponent from '../Components/Profile/ProfileComponent';
export default function Profile() {
		
		//const dispatch = useDispatch<Dispatch>(); // <- 삭제, profileComponents.tsx 로 이동
		//{/* ... */}                               // <- 나머지 코드도 삭제
	return (
		
    	<Provider store={store}>
			<ProfileComponent/>
		</Provider>
	)
}

└componets/profileComponent.tsx

export default function ProfileComponent() {
	const dispatch = useDispatch<Dispatch>(); 
	return(
		<div>
			{/* 렌더링 하는 많은 코드들.. */}
		</div>
	)
}