[React Redux] React Redux란?

🎯 React Redux란?

• React Redux는 컨텍스트를 통해 스토어를 전달하는 과정의 복잡함을 덜어주는 도구를 제공하는 라이브러리다.
• 라이브러리를 사용하면 Redux 스토어를 컨텍스트에 추가하고 컨테이너 컴포넌트를 만드는 일을 더 쉽게 할 수 있다.
• redux에서 관리하는 상태, dispatch 함수 등을 가져올 수 있다.
• 클래스 컴포넌트, 함수형 컴포넌트에 모두 연결할 수 있다.

 

📝 Provider

• React Redux는 컨텍스트에 스토어를 설정할 때 편리하게 사용할 수 있는 컴포넌트인 Provider를 제공한다.
• React는 엘리먼트를 Provider로 감싸기만 하면 해당 엘리먼트의 모든 자식은 자동으로 컨텍스트를 통해 스토어에 접근할 수 있다.

const store = configureStore({
    reducer: rootReducer
})

function App() {
    return (
        <Provider store={store}>
            <MyPage />
        </Provider>
    )
}

• Redux store를 React와 연결하기 위해서는 반드시 Provider로 컴포넌트를 감싸야만 한다.
• Provider는 스토어를 컨텍스트에 추가하고 App 컴포넌트의 자식들이 컨텍스트에서 스토어를 읽을 수 있게 해 준다.
• Provider를 사용하면 코드를 더 단순히 유지하면서 코드 작성 시간을 줄일 수 있다.
• Provider 안에서 렌더링 된 컴포넌트들은 state에 접근할 수 있다. dispatch에도 접근할 수 있다.

 

📝 useDispatch

const addPost = createAction('addPost')

function MyPage() {
    const dispatch = useDispatch()

    const handleClick = () =>
        dispatch(addPost())

    return (
        <button
            onClick={handleClick}
        >Submit</button>
    )
}

• redux의 dispatch 함수를 가져오기 위한 API
• dispatch 함수에 action object를 넘겨 상태 변경을 만든다.
• dispatch로 action creator가 생성한 action을 보내면 redux 내부로 보내지게 된다.

 

📝 useSelector

function MyPage() {
    const posts = useSelector(state => state.posts)

    return posts.map( post => <Post {...post} />)
}

• Redux store로부터 데이터를 얻기 위한 API
• selector function을 인자로 넘긴다.
• selector functio은 데이터에 어떤 변경을 가하면 안 된다.
• 데이터를 특정 형태로 계산하여 읽을 수 있다.