TIL 231221 redux-1

두두맨·2023년 12월 22일
1

리덕스

  • 한 곳에서 데이터를 전역적으로 관리
  • 기존 상태 유지하면서 새로운 state 생성해서 업데이트 해준다. 불변성 유지하며 상태변경
  • 순수함수로 작성되어야 한다.
  • 리덕스에서는 상태를 store에 보관함. store는 리듀서를 실행하여 새 상태를 유지할 책임 있음

createStore (reducer, [preloadedState], [enhancer]) - store 생성 시 사용되며,
4개의 메소드 가짐(dispatch, subscribe, getState, replaceReducer)

dispatch - 액션을 발생 시킴. store 관리자이자 action을 전달하는 메소드
dispatch의 전달 인자로 action 객체가 전달되고, reducer를 호출해 state값을 바꾸는 역할을 한다.

subscribe - store 상태가 변경될 때 호출할 콜백함수 지정 가능.
subscribe 함수에 특정 함수를 전달해주면 액션이 dispatch 될 때마다 전달해준 함수가 호출됨.
getState - store의 현재 상태를 확인할 수 있음.

replaceReducer - 애플리케이션 규모가 커져서 리듀서를 분할하였을 경우 스토어에 연결된
리듀서를 이후 다른 리듀서로 변경해야 할 때 사용한다.

storecreateStore 라는 함수로 생성. 애플리케이션 내부에서 유일성 가짐.

type - 필수값으로 액션을 구분함. state를 어떻게 변화시키는지 정의.

payload - 액션에 따라 데이터로 사용되는 값. 객체를 자료형으로 사용하는 것이 일반적
action의 type에 따라 필요한 state 값을 담고 있다. 어떤 type의 값이든 가질 수 있다.
type , status를 제외한 액션의 정보는 모두 payload에 있어야 한다.
error가 true라면 payload는 error 객체를 가지고 있어야 한다.

error - 오류를 표현하고 싶은 경우 true로 지정, 이런 경우 payload에도 error 객체 넣어야 함.

meta - payload 외의 정보를 액션에 포함하고 싶은 경우 사용

reducer - action, state, 앞의 두가지 받아서 새 상태를 리턴하는 Reducer를 포함.

action - state 변경하기 위해 사용 == setState , 순수 js 객체여야함.
action은 app의 데이터를 store에게 운반해주는 역할이다.
action 객체는 dispatch에게 전달되고, dispatch는 reuducer를 호출해서 새로운 state를 생성한다.

event.target - 자신이 클릭한 자식 요소를 반환한다.
event.currentTarget - 이벤트가 부착된 부모의 위치를 반환한다.

useSelector - 스토어 조회 , 컴포넌트에서 스토어를 직접 조회 가능하도록 하는 훅.

profile
병아리 개발준비생 🐥

0개의 댓글