[Redux] useSelector, useDispatch

redux를 쓰는 이유

- 모든 컴포넌트가 props 없이 state 직접 사용이 가능하다.

- state관리가 용이하다. (reducer로 수정방법을 정의해놓고, dispatch로 수정을 요청하기 때문에, state 에러 추적 용이)

 

state 꺼내쓰는 더 쉬운 방법 : useSelector()

기존방법

const convertStoreDataToProps = (state) => { // redux store 데이터 props로 변환
    return {
        state: state.reducer, // state 데이터를 state라는 이름의 props로 바꾸기
        alertState: state.alertReducer
    }
}

export default connect(convertStoreDataToProps)(Cart);

useSelector() 이용방법

1. import 해오기

import { useSelector } from 'react-redux';

2. 컴포넌트안에서 useSelector((state) => state)

redux에 있는 모든 state를 return해서 변수에 담는다.

let state = useSelector(state => state);

 

dispatch해오는 더 쉬운방법 : useDispatch()

1. import 해오기

2. 변수에 담아서 사용하기

let dispatch = useDispatch();