useSelector(상태조회), useDispatch(액션 디스패치)

리덕스 스토어와 연동된 컨테이너 컴포넌트를 만들 때 connect함수 사용

import React from 'react'
import Counter from '../components/Counter'
import { increase, decrease } from '../modules/counter'

import { connect } from 'react-redux'

// 컴포넌트를 리덕스와 연동할려면 react-redux에서 제공하는 connect 함수를 사용해야한다
// connect(mapStateToProps, mapDispatchToProps)

const CounterContainer = ({number, increase, decrease}) => {
    return <Counter number={number} onIncrease={increase} onDecrease={decrease} />
}

const mapStateToProps = state => ({
    number: state.counter.number
});

const mapDispatchToProps = dispatch => ({
    increase: () => {
        console.log('increase')
        dispatch(increase())
    },
    decrease: () => {
        console.log('decrase')
        dispatch(decrease())
    }
})

// export default CounterContainer
// export default connect(
//     mapStateToProps,
//     mapDispatchToProps
// )(CounterContainer) // 이게 기본

// bindActionCreators 사용 방법 453페이지

export default connect(
    state => ({
        number: state.counter.number
    }),
    {
        increase,
        decrease,
    }
)(CounterContainer)  // 두 번째 파라미터를 아예 객체 형태로 넣어주면 connect함수가 내부적으로 bindActionCreators 작업을 대신해 준다.

connect 함수 대신 hooks 사용

상태 조회는 useSelector, 액션 생성은 useDispatch

import React from 'react'
import Counter from '../components/Counter'
import { increase, decrease } from '../modules/counter'

import {useSelector, useDispatch } from 'react-redux'

const CounterContainer = () => {
    const number = useSelector(state => state.counter.number)

    const dispatch = useDispatch()

    return <Counter number={number} onIncrease={dispatch(increase())} onDecrease={dispatch(decrease)} />
}

export default CounterContainer

connect 함수와의 주요 차이점

컨테이너 컴포넌트를 만들 때 connect 함수를 사용해도 좋고, useSelector와 useDispatch를 사용해도 좋습니다. 차이점은 connect함수를 사용하는 경우 해당 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링될 때 해당 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되지만 hook은 그렇지 않기 때문에 성능 최적화를 이루기 위해 React.memo를 컨터에너 컴포넌트에서 사용해줘야 합니다.