Redux_분류화

책에 맞춰서 ducks 방식으로 분류했다.

Class형 Component를 사용했다. 함수형으로도 바꿀 수 있다.

 

App.js

// console 창에 어떤 순서로 실행하는지 파악할 것.

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

// const 선언

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

export default App;

 

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 com1 from "./modules/com1";

const store = createStore(com1);

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

serviceWorker.unregister();

 

components/Com1.js

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

// 1. Component
const Com1 = (props) => {
  console.log("Component Call");
  return (
    <div>
      <h1>{props.number}</h1>
      <div>
        <button onClick={props.OnIncrease}>+1</button>
        <button onClick={props.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.number);
  return {
    number: state.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);

 

modules/com1.js

// 2. initializing state(초기화 state)

const initialState = {
  number: 0,
};

// 3. Reducer (데이터의 갱신이 일어나는 곳, 가장 중요!, 컴포넌트 이름과 같은 소문자로 쓴다.)
const INCREASE = "INCREASE";
const DECREASE = "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:
      return {
        number: state.number + 1,
      };
    case DECREASE:
      return {
        number: state.number - 1,
      };

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

      return state;
  }
}

export default com1;