redux

Action

어떤 액션을 취할 것인지 정의를 해놓은 객체.


보통 다음과 같은 모양으로 구성된다.
여기서 type은 필수로 지정을 해 주어야 하며, 그 외의 것들은 선택적으로 사용할 수 있다.

이렇게 모든 변화를 action을 통해 취하는 것은 우리가 만드는 앱에서 무슨 일이 일어나고 있는지 직관적으로 알기 쉽게 하는 역할을 한다

Dispatch

Dispatch는 Action을 전달하는 메소드다. dispatch의 전달인자로 Action 객체가 전달된다.
그리고 Reducer를 호출해 state의 값을 바꾸는 역할을 한다.

store

말 그대로 state가 관리되는 오직 하나뿐인 저장소의 역할을 한다.
Redux 앱의 state가 저장되어 있는 공간이다.
다음은 createStore 메소드를 활용해 reducer를 연결하는 방법인데, createStore와 더불어 다른 리듀서의 조합을 인자로 넣어서 스토어를 생성할 수 있다.

Reducer

Reducer 는 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function 이다.

Reducer 함수를 작성할 때 주의해야 할 점이 있다.
바로 Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다는 것이다.
Redux의 장점 중 하나인 변경된 state를 로그로 남기기 위해서 꼭 필요한 작업이다.


switch === if

case === else if

default === else

useSelector()

먼저 useSelector()는 컴포넌트와 state를 연결하는 역할을 한다.
컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있는 것이다.

useSelector의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state 값이 들어간다.

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해주는 메소드이다.
ction 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트.


defaault parameter, 구조분해할당
map 다시 자세히.
생코 객체지향 22번 보기
async/await 및 비동기 복습하기. 동영상 보면서 개념 다시 정리하기.
피보나치(재귀함수)
callback
react 따라만들기
useselector
usedispatch
redux 공부

profile
코딩 일기장

0개의 댓글