redux - dispatch란?

🎊🎎

Redux는 React 애플리케이션에서 전역 상태 관리를 용이하게 해주는 라이브러리입니다. React 컴포넌트들 사이에서 상태를 공유하거나 관리해야할 때 Redux를 사용하면 편리합니다. Redux의 기본 개념은 단일 스토어(Store)에 상태(State)를 저장하고, 액션(Action)이라는 객체를 통해 상태를 업데이트하는 방식으로 동작합니다.

 

 

dispatch는 Redux 스토어에 액션을 보내는 함수이며, 스토어는 해당 액션을 받아 상태를 변경하는 역할을 수행합니다. 이를 통해 상태 관리를 중앙 집중화하여 애플리케이션의 데이터 흐름을 예측 가능하고 유지 보수가 용이하게 만듭니다.

 

스크린샷 2023-07-10 오후 8.20.32​

import React from 'react'
import {useDispatch} from 'react-redux'

const Count2 = () =>{
const dispatch = useDispatch();

const handlerAdd = () =>{
dispatch({type: "LOGIN", payload : true})

const handlerRemove =()=>{
dispatch({type: "LOGOUT", payload : false})
}
return(
<div>
<button onClick={handlerAdd}>로그인</button>
<button onClick={handlerAdd}>로그인</button>
</div>
)

{handlerAdd}와 같이 중괄호를 사용하는 이유는 jsx에서 javascript표현식을 삽입하기 위함이다.

 

 

여기서 사용된 useSelector 함수는 react hook 함수중 하나인데

useSelector 함수는 스토어의 상태를 확인하고 해당 상태의 값에 접근하도록 해준다.

 

action->reducer->store->view