React에서 Redux사용 2 - useSelector / useDispatch hook

React에서 hook이 생기고 난 후 connect방식보다

조금 더 편한 방식인 useSelector와 useDispatch 2가지 hook을 알아보자

 

useSelector()

useSelector 기능을 사용하여 redux store의 state 데이터를 추출해서 가지고 올 수 있다.

let state = useSelector((state) => state)

여기서 state는 redux에 있던 모든 state를 의미하며 위 코드는 state를 리턴한다는 뜻.
console.log(state)를 확인해보면 만들어놓은 모든 reducer들이 담겨있다.

 

connect처럼 props를 담아서 사용할 필요없이 state.[reducer name]으로 데이터를 불러올 수 있음.
예) state.reducername.id

 

특정 state만 사용하고 싶다면?

 

let state = useSelector((state) => state.[reducer name])

만들어놓은 reducer의 함수명을 적어주면 state.reducername이 아닌 state로만 데이터를 꺼내쓸 수 있다.

 

 

useDispatch()

 

let dispatch = useDispatch();

컴포넌트 안에 useDispatch를 생성해주고
connect에서 한것과 방식은 같지만 앞에 props를 적지 않고 바로 사용가능하다.

 

dispatch({ type : ??? })