Redux : state(상태)관리 라이브러리
props vs state
props | state |
---|
- 부모->자식 사이인 컴포넌트 간 무엇을 주고받을 때 | - 부모->자식의 전달이 아닌, 하나의 컴포넌트에서 데이터를 전달해야할 때 |
immutable | mutable |
부모에서 자식으로만 가능 | state가 변하면, re-rendering |
<자식 컴포넌트명 전달정보네이밍 = {전달정보} /> | state = {name:"lee", age:"20"} |
| 리덕스는 이 state를 관리하는 것 |
redux data flow
--> Action
---------------------> Reducer
---------------------> Store
-->
<-- dispatch(Action) <------- React Component
<--------subscribe
Action
- a plain object describing "what happened"
- "객체"인데, "무엇이 일어날지를 설명"하는 객체이다.
- ex)
{type : "LIKE_MATH", res : {id : 3, name : "delilah"}}
Reducer
- a function describing how the application's **"state change
- "함수"인데, "state가 변화"하는 것을 설명하는 함수이다.
- ex)
(preState, action) => nextState
- preState와, action 객체를 받은 이후, nextState를 return 한다.
Store
- "hold the whole state" of my application
- "객체"이며, 모든 state를 관리한다.
redux-promise / redux-thunk
- 무엇인가? : 미들웨어
- 왜 쓰는가? : redux store는 오직 plain object만 dispatching하는데, 이 redux의 store는 또한 모든 state를 관리한다.
store의 state를 변경하기 위해서는 오직 dispatch를 이용해서 action으로 변경하는 방법 뿐이다.
그런데 여기서 문제는, action이 object 형식이여야 store가 action을 받을 수 있는데, 이때 항상 object 형식이 아닐 수 있다는 점이다.
이와 같은 경우, redux-promise는 promise의 형태의 정보를, redux-thunk는 function 형태의 정보를 어떻게 받는지를 알려주는 역할을 수행한다.