Redux_여러 개의 컴포넌트

여러 개의 컴포넌트를 각각 구동하게 하기 위해선

modules 폴더 안의 index.js를 만들어 combine 시킨 뒤 쓰면 된다.

(또는 기존 src의 index.js 폴더 안에 넣어도 쓸 수 있다.)

 

App.js

import React, { Component } from "react";
import Com1 from "./components/Com1";
import Com2 from "./components/Com2";

class App extends Component {
  render() {
    console.log("App Call");
    return (
      <div>
        <Com1 />
        <Com2 />
      </div>
    );
  }
}
export default App;

 

 

components/Com1.js

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

// 1. Component
//Com1에서 사용할 변수 지정
const Com1 = ({ number, OnIncrease, OnDecrease }) => {
  console.log("Component Call");
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <button onClick={OnIncrease}>+1</button>
        <button onClick={OnDecrease}>-1</button>
      </div>
    </div>
  );
};

// 4. Store 생성(index.js)

// 5. state를 변수로 받은 뒤 Props로 전달(State to Props)
const stateToProps = (state) => {
  console.log("StateToProps Call");
  console.log(state.com1.number);
  return {
    //rootReducer에서 복수의 state를 combine 했으므로, 각자 따로 지정해야 한다.
    number: state.com1.number,
  };
};

// 6. Dispatch to Props
// 파일 분리 시 export 필요
// function increase() call 하면 reducer(여기선 counter)의 INCREASE를 전달하라고 요청
const dispatchToProps = (dispatch) => ({
  // OnIncrease 부르면 INCREASE 실행
  OnIncrease: () => {
    console.log("increase");
    dispatch(increase());
  },
  OnDecrease: () => {
    console.log("decrease");
    dispatch(decrease());
  },
});

// 7. Connect
// 8. Connect한 Container를 수정
export default connect(stateToProps, dispatchToProps)(Com1);

 

components/Com2.js

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

// 1. Component
//Com2에서 사용할 변수 지정
const Com2 = ({ number, OnIncrease, OnDecrease }) => {
  console.log("Component Call");
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <button onClick={OnIncrease}>+1</button>
        <button onClick={OnDecrease}>-1</button>
      </div>
    </div>
  );
};

// 4. Store 생성(index.js)

// 5. state를 변수로 받은 뒤 Props로 전달(State to Props)
const stateToProps = (state) => {
  console.log("StateToProps Call");
  console.log(state.com2.number);
  return {
    //rootReducer에서 복수의 state를 combine 했으므로, 각자 따로 지정해야 한다.
    number: state.com2.number,
  };
};

// 6. Dispatch to Props
// 파일 분리 시 export 필요
// function increase() call 하면 reducer(여기선 counter)
// 의 INCREASE를 전달하라고 요청하는 것.
const dispatchToProps = (dispatch) => ({
  // OnIncrease 부르면 INCREASE 실행
  OnIncrease: () => {
    console.log("increase");
    dispatch(increase());
  },
  OnDecrease: () => {
    console.log("decrease");
    dispatch(decrease());
  },
});

// 7. Connect
// 8. Connect한 Container를 수정
export default connect(stateToProps, dispatchToProps)(Com2);

 

modules/index.js

import { combineReducers } from "redux";
import com1 from "./com1";
import com2 from "./com2";

const rootReducer = combineReducers({
  com1,
  com2,
});

export default rootReducer;

 

 

modules/com1.js

// 2. initializing state(초기화 state)
const initialState = {
  number: 0,
};

// 3. Reducer (데이터의 갱신이 일어나는 곳, 가장 중요!, 컴포넌트 이름과 같은 소문자로 쓴다.)

// const 선언
const INCREASE = "com1/INCREASE";
const DECREASE = "com1/DECREASE";

export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });
function com1(state = initialState, action) {
  //state에 초기값을 넣기 위해 가장 먼저 실행한다. Default Reducer을 실행한다.
  console.log("Reducer Call");
  switch (action.type) {
    case INCREASE:
      console.log("com1_switch_INCREASE");
      return {
        number: state.number + 1,
      };
    case DECREASE:
      return {
        number: state.number - 1,
      };

    default:
      console.log("Default Reducer");

      return state;
  }
}

export default com1;

 

modules/com2.js

// 2. initializing state(초기화 state)
const initialState = {
  number: 0,
};

// 3. Reducer (데이터의 갱신이 일어나는 곳, 가장 중요!, 컴포넌트 이름과 같은 소문자로 쓴다.)

// const 선언
const INCREASE = "com2/INCREASE";
const DECREASE = "com2/DECREASE";

export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });
function com2(state = initialState, action) {
  //state에 초기값을 넣기 위해 가장 먼저 실행한다. Default Reducer을 실행한다.
  console.log("Reducer Call");
  switch (action.type) {
    case INCREASE:
      return {
        number: state.number + 1,
      };
    case DECREASE:
      return {
        number: state.number - 1,
      };

    default:
      console.log("Default Reducer");

      return state;
  }
}

export default com2;

 

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./modules";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();