코알누-redux개념 소개

리액트는 단방향 통신

부모가(app)이 자식한테만 전달가능하고 자식이 부모한테는 못간다.

 

리덕스를 사용하는 이유: store에다가 state를 개별 저장해서 app에서 props로 일일이 다 받아오는 방식으로 하면 나중에 가서는 너무 많아져서 힘드니까

리액트를 어려워하는 이유 컴포넌트가 state의 값을 직접 바로 바꾸거나 요청하지 못함 / store에 있는 값을 가져오기 전에 step by step을 거쳐야하는데 그 스텝이

리덕스를 어려워하는 이유

: component

 

방식:어떤 state를 만들어서 거기서 state를 싹다 저장하고 여기서 component가 요청을 해서 값을 받아오는 방식

 

바로 이 스텝이다. 컴포넌트는 action을 만든다. ex)상품정보 가져오기라는 action을 던진다. 이게 reducer라는 함수로 가게 되는데 reducer가 행동 지침에 따라서 store를 업데이트한다.

useDispatch:액션을 던지는 훅

useSelector: 컴포넌트에서 store에 있는 값을 가져와서 쓸때에

 

redux랑 react-redux 차이점

간단히 말해서, Redux는 상태 관리를 위한 독립적인 라이브러리이며,
React-Redux는 Redux를 React 애플리케이션과 함께 사용하기 위한 도구 세트입니다.
React-Redux를 사용하면 Redux를 더욱 효율적으로 React 애플리케이션에 통합할 수 있습니다.

 

 

react를 사용해서 간단하게 버튼을 누르면 1씩 증가하던걸 만들었던것처럼

redux를 사용해서도 만들어보기

 

provider가 store를 들고 app에다가 store를 적용

컴포넌트는 항상 import를 해주자

redux라는 폴더 만들고 store.js생성

reducer를 생성하기 위해 폴더랑 파일 새로 만들고 두개의 매개변수 받는다.

 

 

이 과정을 먼저 해보자면 useDispatch를 react-redux에서 먼저 가져온다 / 리액트 공식문서에서는 useDispatch를 dispatch로 저장하라고 했음

const dispatch = useDispatch

 

 

 

Action

액션을 언제 던져주느냐? increase증가 버튼을 눌렀을때

액션은 단순한 객체

dispatch({type:increment})

 

 

 

 

 

Reducer

정말 자동으로 reduce가 dispatch한 액션을 불러올수 있을까?

reducer가 store를 바꾸는 역할을 한다(return값으로) store는 가만히 있다가 새로운걸 반환하면 그걸 적용해준다./...state를 쓴이유 기존의 state는 유지를 하되 count만 변경해준다./store가 살짝 멍청해서 안에있는 세부 디테일이 바뀌었는지는 생각을 하지 않아서 객체의 새로운 주소가 오느냐 안오느냐를 본다.  ...state는 기본적으로 치고 간다고 생각

store는 반드시 return값을 받아야 해서 else인 경우에도 작성해준다.

 

 

 

app에서 만든 state들 다 싹다 삭제해주고 redux로 대체해주자.

state는 앱에서 이제 안만들고

useSelector를 불러온후에

state를 매개변수로 줌(store에 있는 모든 state를 전달)

 

---

redux가 훌륭한 이유

내가 부모건 자식이건 상관없이 어디서든 state필요하면 그 값을 가져다가 사용가능

 

 

 

state값 쓰고 싶으면 useSelector 사용

---

 

Payload

 

 

 

 

 

---

 

 

login버튼을 누르면 noona,123이 뜬다.