Redux 02 | Basics (리액트 앱 적용 / container & connect)

katej927·2021년 7월 25일
0

middlewares & libraries

목록 보기
2/17
post-thumbnail

🔷 리액트 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. 패키지 설치 (코드 깔끔)
    1. 크롬 확장 프로그램 설치
    2. yarn add redux-devtools-extension 으로 설치
    3. 코드 추가&수정
            import { composeWithDevTools } from 'redux-devtools-extension';

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

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


  • 컨테이너 컴포넌트: 리덕스 스토어와 연동된 컴포넌트
  • src/containers & connect함수
    1. src/containers 에 container 컴포넌트 생성
    2. 리덕스 연동 -> 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);

  • 참고
    '리액트를 다루는 기술'_저자 김민준
profile
°˖✧ Dreams come true ✧˖°

0개의 댓글