Redux -01

Noa·2022년 12월 2일
0

React

목록 보기
15/22

패키지 설치
yarn add redux react-redux => redux와 react-redux를 같이 설치 하겠다는 의미의 명령어

React-redux 패키지 => redux를 react에서 사용할 수 있도록 서로 연결해주는 패키지

src 폴더안에 redux폴더 생성 -> Redux폴더 안에 config, modules 폴더 생성 -> config 폴더 안에 configStore.js 파일 생성

  • 우리가 해야할 것은 단지 리덕스를 쓰는 방법만 익히면됨.

모듈이란, State의 그룹

Reducer 함수: 변화를 일으키는 함수

reducer 인자 첫번째 자리에서는 state, 두번째 자리에서는 action을 꺼내서 사용 할 수 있다.
state = intialState 처럼 state에 initialState를 할당해줘야 한다.


Redux는 Reducer를 포함한 store라고 할 수 있다.

store는 상태를 저장하는 장소

어떤 Action을 일으킨다 => dispatch라고 한다.

Reducer는 우리가 action을 일으켰을 때 자동 실행된다.=> 그리고 그 action에 맞게 데이터를 수정해준다.

store에 있는 데이터를 바꿔주는 역할을 Reducer 함수가 한다.

module을 store에 연결을 시켜줘야한다. => 연결을 해주면 만든 state를 store에서 꺼낼 수 있다.

component에서 store를 직접 조회하여 module이 store에 잘 연결되었는지 확인한다.
component에서 redux의 store를 조회하고자 할때는 => useSelector라는 react-redux의 hook을 사용한다

같은 코드 화살표 함수로

만든 counter라는 module의 state

화살표 함수에서 꺼낸 state 인자는 현재 프로잭트에서 존재하는 모든 reudx moudle의 state를 가져오라는 뜻

보통 module은 기능의 이름을 따서 파일을 생성한다. module의 구성 요소로는 initialState, reducer가 있다. => module을 만들면 store에 연결을 해야한다. => component에서 store를 조회할 때는 useSelector를 사용해야 한다. => useSelector, state는 모든 modules에 state를 조회할 수 있는 값이다.

profile
몰입

0개의 댓글