리액트 app에 리덕스 적용

1. store 만들기

• src/index.js → 스토어 제작 & 리액트 app에 리덕스 적용 작업
• 형태 예시

    import React from 'react';
    import ReactDOM from 'react-dom';
    **import { createStore } from 'redux';** // 추가
    ****import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    **import rootReducer from './modules';** // 추가
    ****
    **const store = createStore(rootReducer);** // 추가
    ****
    ReactDOM.render(<App />, document.getElementById('root'));

    serviceWorker.unregister();

2. 리덕스 적용 (<Provider>사용)

• 스토어 사용 위해→ <App/>를 <Provider>로 감쌈
• <Provider>
  • 'react-redux' 제공
  • store: props로 전달

3. Redux DevTools 적용

• 리덕스 개발자 도구
• 크롬 확장 프로그램 (설치하여 사용 가능)
• 사용 방법
• 옵션 1. store 코드 수정

        const store = createStore(
          rootReducer,
          **window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),**
        );

• 옵션 2. 패키지 설치 (코드 깔끔)
• 크롬 확장 프로그램 설치
• yarn add redux-devtools-extension 으로 설치
• 코드 추가&수정

import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(rootReducer, composeWithDevTools());

🔷 컨테이너 컴포넌트 만들기

---

• 컨테이너 컴포넌트: 리덕스 스토어와 연동된 컴포넌트
• src/containers & connect함수
• src/containers 에 container 컴포넌트 생성
• 리덕스 연동 -> connect함수(react-redux 제공) 사용

◾ connect함수

◽ 사용법

connect(mapStateToProps, mapDispatchToProps)(연동할 컴포넌트)

• mapStateToProps, mapDispatchToProps 에서 반환하는 객체 내부 값들

컴포넌트의 props로 전달

- mapStateToProps 란?

스토어의 상태를 컴포넌트의 props로 넘겨주기 위한 함수

• 파라미터: state (현재 스토어의 상태)

- mapDispatchToProps 란?

액션 생성 함수를 컴포넌트의 props로 넘겨주기 위한 함수

• 파라미터 : dispatch (store의 내장 함수)

◽ 원리

connect 함수 호출 → 다른 함수 반환 → 반환된 함수의 parameter: 컴포넌트 ⇒ 리덕스와 연동된 컴포넌트 만들어짐

◽ 형태 예시 (일반적)

import React from "react";
import { connect } from "react-redux";
import Counter from "../components/Counter";
import { increase, decrease } from "../modules/counter";

const CounterContainer = ({ number, increase, decrease }) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
  );
};

// mapStateToProps, mapDispatchToProps 선언
const mapStateToProps = (state) => ({
  number: state.counter.number,
});
const mapDispatchToProps = (dispatch) => ({
  increase: () => {
    dispatch(increase());
  },
  decrease: () => {
    dispatch(decrease());
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(CounterContainer);

---

◽ bindActionCreators 사용

• 추가 & 수정 코드

import { bindActionCreators } from "redux";

export default connect((dispatch) =>
  bindActionCreators(
    {
      increase,
      decrease,
    },
    dispatch
  )
)(CounterContainer);

◽ mapDispatchToProps 에 해당하는 파라미터: 액션 생성 함수로 이루어진 객체 형태

• connect함수가 bindAtionCreators 처리
• 형태

export default connect(
  (state) => ({
    number: state.counter.number,
  }),
  {
    increase,
    decrease,
  }
)(CounterContainer);

---

• 참고 '리액트를 다루는 기술'_저자 김민준

---

작성자: 정선미

작성일: 2021-07-25

---