[Redux] 컴포넌트에서 리덕스 데이터 사용하기(순서참고) + 디테일 페이지 수정

- 클래스형 컴포넌트에서 리덕스 데이터 사용하기

1. 리덕스 모듈과 connect함수를 불러온다.

[App.js]

import {connect} from "react-redux";

 

 

2. 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어준다. (=디스패치)

 

connect하기위해선 두개의 함수 필요

load와 create import

load, create둘다 가져왔으니 연결

 

 

3. connect로 컴포넌트와 스토어를 엮어준다.

 

 

4. 콘솔에 this.props를 찍어본다.. (스토어에 있는 값이 잘 나왔는지 확인)

5. this.state에 있는 list를 지우고 스토어에 있는 값으로 변경

this.state.bucket_list -> this.props.bucket_list로 변경해주었다.

 

6. setState를 this.props.create로 바꿔준다.

 

- 함수형 컴포넌트에서 리덕스 데이터 사용하기

훅을 사용해서 액션 생성 함수를 불러보고, 스토어에 저장된 값 가져와본다.

현재 버킷리스트.js파일을 보면 props에서 받아오고있는데, 훅 useSelector()를 사용해 바로 리덕스에서 가져올 수 있다.

 

[BucketList.js]

import {useSelector, useDispatch} from "react-redux";

import해왔으면 이제 변수 선언해준다.

 

 

디테일 페이지 바꿔주기

 

[App.js]

[BucketList.js]

적용 전(주소창)

적용 후(주소창)

 

[Detail.js]

head내용 지우고 useSelector 를 사용해 리덕스 스토어에있는 데이터 가져오기

index는 숫자여야하니 바꿔준다. (URL파라미터는 기본적으로 스트링이 들어옴)

스트링을 숫자로 바꿔준다(parseint)

디테일 페이지 결과: