2. 구독 페이지 (리액트 리덕스)

오늘은 툴킷을 사용하지 않은 리덕스와 리액트 리덕스로

간단하게 컴포넌트 2개의 페이지를 만들어서

리덕스 활용법을 연습해보았다.

 

먼저, 리액트 리덕스를 사용하기 위해서는

npx create-react-app .

을 통하여 리액트앱을 생성해주고,

npm i redux react-redux

위의 명령어를 통해 리덕스와 리액트 리덕스를 설치해줍니다.

 

---

 

설치가 완료되었다면, 리덕스와 리액트 리덕스를 사용할 준비가 끝났다

 

이전의 리덕스 포스팅에서 봤다시피 리덕스에서는 store, action, reducer가 매우 중요하다.

 

 

1. Redux

 

index.js

 

 

Provider는 react-redux에 내장되어 있다.

store를 손쉽게 리액트 앱에 연동시킬 수 있도록 도와준다.

연동할 컴포넌트를 Provider로 감싸주고 props로 store값을 설정해준다.

 

 

 

redux폴더>store.js

 

 

createStore이라는 리덕스의 내장메서드를 통해

해당 스토어에 들어가있는 리듀서인

SubscriberReducer가 들어가 있다.

 

구독중인 함수들이 상태가 업데이트 될 때마다 다시 실행되게 해줌

 

 

 

redux폴더>subscribers폴더>types.js

 

 

액션객체는 타입을 무조건 가지고 있어야하므로

reducer, 액션생성함수에 type을 기재해줘야한다.

재사용성과 오타방지를 위해 types.js에서

type을 상수로 선언해줍니다.

 

export를 하여 나중에 다른곳(reducer, 액션생성함수)에서 이것들을 불러내서

사용할 수 있도록 해준다.

 

 

 

redux폴더>subscribers폴더>actions.js

 

 

액션을 만들 때마다 객체를 그때그때 만들면 힘들기 때문에

액션을 만드는 함수를 만든다.

이를 액션 생성자라고 부른다.

 

types.js에서 상수로 선언한 type을 

import해서 가져다가 사용한다.

 

 

 

redux폴더>subscribers폴더>reducer.js

 

 

reducer는 액션의 type에 따라 변화를 일으키는 함수다.

그리고, reducer에는 최초변화를 일으키기전, 지니고있어야할

초기상태가 정의되어 있어야한다.

 

initialState 상수에 초기상태 count:370을 선언해주었다.

그리고, switch문을 이용하여 action.type에 따라

상태에 따른 변화를 주면 되는 것이다.

여기서 주의해야할 것은 기존의 state를 직접 건드리면안되고,

반드시 기존state을 복사하여 새로운 상태객체를 새로 만들어야한다.

...state,count:state.count+1 처럼 기존 state를 스프레드문법으로

새롭게 복사하고, 상태객체를 새로 만들었다.

 

 

 

components폴더>Subscriber.js

 

 

컨테이너 컴포넌트를 store에 연결시켜주려면

react-redux의 내장함수인 connect함수를 사용한다.

 

connect 함수의 파라미터로

컴포넌트에 연결시킬 상태(mapStateToProps)와

액션함수들(mapDispatchToProps)을 전달해주면,

컴포넌트를 리덕스 스토어에 연결시키는 또 다른 함수를 반환해준다.

 

 

 

components폴더>Display.js

 

 

위의 Subscribers.js처럼

Display컴포넌트를 store에 연결해주기 위해 connect함수를 사용

 

 

 

결과

 

결과에서 보이다시피 초기상태값인 370에서

구독하기 버튼이 눌릴때 마다

addSubscriber이라는 액션 생성자를 통해

type이 ADD_SUBSCRIBER에 맞는

변화를 통해 기존의 counter에서 state.counter+1을 해주어

1씩 증가하게 만들어주었다.