리액트와 함께 사용

redux 공식문서 - redux with react

공식문서에서 리액트에서 리덕스를 사용할때 컴포넌트 구성을 어떻게 해야할지 가이드 되어 있다. 리액트 컴포넌트의 재사용을 쉽게 하기 위한 방식으로 재공한다 하니. 한번 읽어보고 적용할수 있게 노~오력 해보자!

프레젠테이션 컴포넌트

• 마크업, 스타일시트 적용
• 리덕스 사용 X
• props를 통한 데이터 읽기
• props를 통한 데이터 변경

보통 우리가 작성할 대부분의 컴포넌트는 프레젠테이션 컴포넌트! 리덕스에 직접 연결되지 않고, 부모(컨테이너 컴포넌포)에게 props로 전달받은 데이터를 통해 읽기/수정(변경) 하게 된다.

리덕스에 연결된 컴포넌트를 분리해 둠으로써 이후 프레젠테이션 컴포넌트를 재사용 할수 있게 된다.

컨테이너 컴포넌트

• 마크업, 스타일시트 없음
• 데이터가저오기, 상태업데이트
• 리덕스 사용 O
• 리덕스를 통해 데이터 읽기
• 디스패치를 통해 데이터 변경

리덕스에 직접 연결되는 컴포넌트며 스타일을 적용하지 않는다. 하위 컴포넌트를 담는 그릇 역할만 하게 된다. 만약 상위 컴포넌트에 너무 많은 하위 컴포가 연결된다면 더 하위에 컨테이너컴포를 추가하도록 한다. 또는 connect()를 통해 컴포넌트를 리덕스 스토어에 연결한다.

connect()

react-redux 공식문서 - connect() API

connect()는 리액트 컴포넌트를 리덕스 스토어에 연결한다. 연결된 컴포넌트에서는 데이터를 사용/변경할 수 있게 된다. 리덕스에 연결할 컴포넌트 하단에 export 할때 connect()를 중첩하여 사용한다.. 이해가 안된다면 예제보기ㅋ

// Header 컴포넌트
const Header = (props) =>{
  return (
  ... 중략
  )
}

// 리덕스관련 코드 : 하단에 작성하도록~
// props로 전달할 스토어-state를 작성한다.
const mapStateToProps = (state) => ({
  // 사용할 props명 : state.불러올state이름, 맨처음 이름과 같은이름으로!
  selectNav: state.selectNav,
  inputVal: state.inputVal,
  noriData: state.noriData
});

// 컴포넌트를 내보낼때
// connect(mapStateToProps,mapDispatchToProps)(Header)
export default connect(mapStateToProps, {
  checkNoti,
  changeNav,
  checkMessage,
  saveMessageData,
  saveNotiData
})(Header);

매개변수

아래 매개변수는 선택적으로 사용할 수 있다. 보통 mapStateToProps, mapDispatchToProps를 많이 사용한다...? 사실 이 두개만 써봤다.ㅋㅋㅋㅋㅋ핳핳

• mapStateToProps : 함수, 스토어 데이터를 props로 컴포넌트에 전달
• mapDispatchToProps : 함수 or 객체 스토어 데이터를 변경할수 있는 액션크리에이터함수를 props로 전달
• mergeProps : 함수
• options : 객체

1. mapStateToProps

위 예제코드에서 볼수 있지만 mapStateToProps는 함수형태로 작성하며, 따로 작성한뒤 변수명으로 connect()에 전달하는 것이 보기 좋다~

const mapStateToProps = (state) => ({
//  <전달받을props이름> : state.<스토어의state이름>,
  inputVal: state.inputVal,
  noriData: state.noriData
});

만약 mapStateToProps의 값이 없고, mapDispatchToProps만 값이 있다면, mapStateToProps의 위치에 null을 넘겨주도록 한다.

2. mapDispatchToProps

mapDispatchToProps는 스토어의 값을 변경하기 위한 액션크리에이터를 불러 넣는다!!!! 즉, 사용할 액션크리에이터를 import해야 한다.

import { addTodo, changeData ... } from '..경로/컴포Actions' // 액션크리에이터 모아둔 파일

const Header = (props) =>{
  return (
  //  컴포넌트 내용 작성하기
  )
}


const mapStateToProps = (state) => {
  //... props로 전달할 스토어의 state 작성
}

// connect(mapStateToProps, <mapDispatchToProps:객채형>)
export default connect(mapStateToProps,{
  addTodo,
  changeData
})(Header)

위 에제 코드에서 볼수 있지만 mapDispatchToProps는 함수 or 객체 형태 모두 작성 할 수 있다. 편하게 객체형태로 작성하길 추천하며, connect()에 직접 객체를 넣는 형태로 작성하길 추천한다.
(만약 함수형으로 작성할 거면, mapStateToProps와 동일한 방식을 사용하길 추천! 왜냐믄! 복잡스러우니까!)