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

 

• 클래스형 컴포넌트에서 connect() 함수를 이용해서 리덕스 스토어와 컴포넌트를 연결했다.
• 함수형 컴포넌트에서는 useSelector() 훅을 사용해서 store에 접근하여 변수를 가져올 수 있고 useDispatch() 훅을 통하여 직접 action creator들을 dispatch 시킬 수 있다.
• 클래스형 컴포넌트의 connect와 다른 점은 connect 함수를 사용하는 경우 해당 컨테이너의 부모 컴포넌트가 리렌더링 될 때 해당 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되지만, hook은 그렇지 않기 때문에 React.memo를 사용해서 컴포넌트의 성능 최적화를 해야한다.

 

useSelector()

• 리덕스 스토어의 데이터(=state를) 조회할 수 있다.
• 사용하기 위해서는 "react-redux"의 useSelector를 import 해서 사용해야 한다.
• 사용법은 아래와 같다.

const [변수명] = useSelector(state => [리덕스 스토어 state]);

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

const App = () => {
  //const [변수명] = useSelector(state => state.[리덕스 state]);
  //store에 넣어준 리듀서 bucket의 리턴 값에서 key가 list인 값을 가져옴
  const bucket_list = useSelector(state => state.bucket.list);

  return (
    <div>함수형 컴포넌트</div>
  );
}

export default App;

• 리덕스 스토어 state는 스토어에서 가져온 reducer의 이름을 넣어주면 된다.
• 예를 들어 const store = createStore({bucket}) 이라면 [리덕스 스토어 state]에 bucket을 넣어서 접근할 수 있다.

 

useDispatch()

• 리덕스 모듈에서 생성한 action을 발생시킬 수 있다.
• 사용하기 위해서는 내가 만든 리덕스 모듈의 ActionCreator와 "react-redux"의 useDispatch를 import 해야 한다.
• useDispatch를 "react-redux"에서 import 한 후에 useDispatch()를 변수에 할당하고 할당한 변수의 인자에 내가 만든 리덕스 모듈의 ActionCreator를 넣어주면 된다.

const dispatch = useDispatch();

...

const stateChange = () =>{
    useDipatch([ActionCreator]);
}

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {actioncreator} from 'redux 모듈'

const App = () => {
  const dispatch = useDispatch();

  return (
    <div onClick={()=>{dispatch(actioncreator())}}>함수형 컴포넌트</div>
  );
}

export default App;

 

버킷리스트 데이터 삭제를 위한 Detail.js에 적용하기

// 리액트 패키지를 불러온다.
import React from "react";

// redux hook을 불러온다.
import { useDispatch, useSelector } from "react-redux";
// 내가 만든 액션 생성 함수를 불러온다.
import {deleteBucket} from "./redux/modules/bucket";

const Detail = (props) => {
    const dispatch = useDispatch();
    
    
  // 스토어에서 상태값 가져오기
  const bucket_list = useSelector((state) => state.bucket.list);
  // url 파라미터에서 인덱스 가져오기
  let bucket_index = parseInt(props.match.params.index);

  console.log(props);
  return (
    <div>
      <h1>{bucket_list[bucket_index]}</h1>
      <button onClick={() => {
        //   dispatch(); <- 괄호안에는 액션 생성 함수가 들어가야한다.
        // 예
        dispatch(deleteBucket(bucket_index));
        props.history.goBack();
      }}>삭제하기</button>
    </div>
  );
};

export default Detail;

 

BucketList.js / App.js / bucket.js