React+Redux(2)

1. Store의 값 가져오기 

react는 redux의 store에서 관리되고 있는 state 값을 가져오는 hook을 제공한다. 

이는 useSelector()라는 hook이다. 

 

2. useSelector()의 사용법

store의 상태를 반환하려면 redux에서 제공하는 store안에 들어있는 (configureStore함수로 정의되어 있는 store 객체 안에 들어있는) getState함수가 필요하다. 또한 우리는 typescript환경에서 getState를 사용할 것이므로 store.getState()함수로 반환되는 type을 지정해주어야한다. 

따라서 RootState를 다음과 같이 store.getState()함수의 ReturnType으로 지정한다. 

그 후 useSelector()hook에서 사용할 type을 지정해준다. 

다음과 같이 return 값을 정하면 state는 store의 getState()의 리턴 값이므로 state안에는 정의된 slice들이 들어있다. 

나는 앞서 userSlice를 정의했으므로 state.user라는 값을 selectUser라는 변수에 정의했다. 

 

그 후 redux의 값을 사용하고 싶은 react component안에서 useSelector(내보낸 store의 state.slice)를 통해 사용하면 된다. 

 

로그인이라는 기능을 구현할 때 user정보를 받아오고 싶다면 useSelector()hook안에 아까 정의한 store.getState.user = selectUser를 매개변수로 전달하면 된다. 그러면 

다음과 같이 조건부렌더링 등에 사용할 수 있다. userInfo중에 어떠한 상태에 따른 조작이 가능하다는 것이다. 

 

3.useDispatch()의 사용법

Dispatch함수 안에는 리듀서의 이름을 적어두는 것이 일반적이다.

dispatch란 reducer를 실행해주는 hook이기 때문에 

다음과 같이 dispatch를 시키고 싶은 component내에 dispatch라는 변수를 정의해준 후

slice에서 정의하고 export시킨 리듀서들을 dispatch안에 적어준다. 

다음과 같이 적어주면 handleSubmit이라는 함수가 실행될 때 dispatch함수를 통해 reducer가 실행되면서 전역 상태를 변경할 수 있다. 또한 이 변경된 상태를 이용하여 추가적으로 작업도 할 수 있게 된다.