[Redux]Redux 복습 템플릿_1

해당 글은 velopert님 블로그 글을 보고 개인 복습용으로 만들었습니다.

출처 : https://velopert.com/3533

============================================================

1. 프로젝트 클론

   1. git clone https://github.com/vlpt-playground/begin-redux.git

2. 패키지 설치

   1. yarn

3. 절대경로 로드 설정

   1. .env 파일에서 NODE_PATH= ???

4. 불필요 파일 제거

   1. App.js

   2. App.css

   3. App.test.js

   4. Logo.svg

5. 주요 컴포넌트 생성 및 루트 컴포넌트 생성

   1. 크게 components / containers / store 로 나뉜다.

6. 구현

   1. 카운터 모듈 작성하기

      src/store/modules/counter.js

      //액션 타입 정의
      ...
      ​
      //액션 생성 함수 - export
      ...
      ​
      //initialState 정의
      ...
      ​
      // 리듀서 생성 - export
      // 리듀서 함수는 액션의 타입에 따라 변화된 상태를 정의하여 반환한다.
      ...

   2. redux-actions의 createAction과 handleActions 사용

      src/store/modules/counter.js

      import {createAction} from 'redux-actions';
      ​
      //액션 타입을 정의
      ...
      ​
      //액션 생성 함수 -> createAction을 이용해서
      ...
      ​
      //initialState 정의
      ​
      // handleActions의 첫번째 파라미터는 액션을 처리하는 함수들로 이뤄진 객체
      // 두번쨰는 초기 상태
      ...
      //state 부분 비구조화 할당 처리
      ​

   3. combineReducers로 리듀서 합치기

      src/modules/index.js

      import { combineReducers } from 'redux'
      import counter from './counter';
      ​
      // combineReducers 함수 작성
      export default ...

   4. 스토어 만드는 함수 만들기

      src/store/configure.js

      import { createStore } from 'redux'
      import modules from './modules' // 
      ​
      const configure = () => {
          //createStore를 활용하여서 store를 만들고 반환한다.
          ...
          //redux-devtools 사용
          const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      }
          
      export default configure

   5. 스토어 만들어서 내보내기

      src/store/index.js

      import configure from './configure';
      ​
      //export default ...
      ...

   6. 리액트 앱에 리덕스 적용

      react-redux에 있는 Provider를 사용

      src/Root.js

      import React from 'react';
      import { Provider } from 'react-redux';
      import store from './store'
      ​
      import App from './component/App';
      ​
      const Root = () => {
          return (
              //App 컴포넌트를 Provider로 감싸주고, store props로 store를 넘겨준다.
              ...
          )
      }

   7. CounterContainer 컴포넌트 만들기

      src/containers/CounterContainer.js

      import React, { Component } from 'react';
      import Counter from 'components/Counter';
      ​
      //기본적인 클래스형 CounterContainer 컴포넌트 생성
      //return 값으로 Counter 컴포넌트를 리턴
      ...
      ​
      export default CounterContainer;

      src/components/App.js

      import React, { Component } from 'react'
      import CounterContainer from 'containers/CounterContainer';
      import AppTemplate from './AppTemplate';
      import Todos from './Todos';
      ​
      class App extends Component {
          render() {
              return (
                  <AppTemplate
                      counter={<CounterContainer />}
                      todos={<Todos />}
              )
          }
      }
                      
      export default App

      src/containers/CounterContainer.js

      import React, { Component } from "react"
      import Counter from "components/Counter"
      //react-redux로 부터 connect import
      //counter module에서 미리 만들어 놓은 액션들을 counterActions 이름으로 전체를 import 해온다.
      ...
      ​
      class CounterContainer extends Component {
        
         //handleIncrement 함수 생성
          ...
          
        //handleDecrement 함수 생성
         ...
          
        render() {
          const { handleIncrement, handleDecrement } = this
          const { number } = this.props
          return (
              <Counter
                  onIncrement={handleIncrement}
                  onDecrement={handleDecrement}
                  number={number}
               />
          )
        }
      }
      ​
      //props 값으로 넣어 줄 상태를 정의
      //mapStateToProps 함수 생성
      ...
      ​
      //props 값으로 넣어 줄 액션 함수들을 정의
      //mapDispatchToProps 함수 생성
      ...
      ​
      //컴포넌트를 리덕스와 연동 할 때, connect를 사용
      //connect()의 결과는 컴포넌트에props를 넣어주는 함수를 반환
      //반환된 함수에 우리가 만든 컴포넌트를 넣어주면 된다.
      ​
      export default connect ...
      ​

      connect 내부에 mapStateToProps , mapDispatchToProps 추가 하기

      src/containers/CounterContainer.js

      import React, { Component } from "react"
      import Counter from "components/Counter"
      //react-redux로 부터 connect import
      import { connect } from "react-redux"
      //counter module에서 미리 만들어 놓은 액션들을 counterActions 이름으로 전체를 import 해온다.
      import * as counterActions from "store/modules/counter"
      ​
      class CounterContainer extends Component {
          (...)
      }
       
      //connect 내부에 mapStateToProps , mapDispatchToProps 추가 하기
      export default connect( ... )( ... )

      bindActionCreator 함수 사용

      src/containers/ConterContainer.js

      import React, { Component } from "react"
      import Counter from "components/Counter"
      //react-redux로 부터 connect import
      import { connect } from "react-redux"
      //counter module에서 미리 만들어 놓은 액션들을 counterActions 이름으로 전체를 import 해온다.
      import { bindActionCreators } from 'redux'
      import * as counterActions from "store/modules/counter"
      ​
      ​
      class CounterContainer extends Component {
          (...)
      }
       
      //connect 내부에 mapStateToProps , mapDispatchToProps 추가 하기
      export default connect( ... )( ... bindActionCreators( ... ) )