React숙련주차12(Redux_Refactoring(action creators/action values))

🔴Action creator를 사용하는 이유

🔴action value

🔴action creators

---

💫Action creator를 사용하는 이유

1. 휴먼에러 (오타) 방지
   • 액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있습니다. 그래서 의도치 않은 휴먼에러(오타)를 없앨 수 있어요.
2. 유지보수의 효율성 증가
   • 우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있습니다.
3. 코드 가독성
   • 모듈 파일에서 Action Creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 모든 Action들을 한눈에 알 수 있게 됩니다. 즉 그 자체가 Action 들의 리스트업을 해주는 역할을 갖게 되는 것 입니다.
4. 리덕스 공식문서에서 소개되고 있는 방법

---

action values

// src/modules/counter.js
// action value
export const PLUS_ONE = "PLUS_ONE"  // export를 해줘서 전역에서 사용이 가능하도록 함
export const MINUS_ONE = "MINUS_ONE"

> export를 해줘서 전역에서 사용이 가능하도록 하고(상수로 생성)

// src/modules/counter.js

// action value
export const PLUS_ONE = "PLUS_ONE"  
export const MINUS_ONE = "MINUS_ONE"


const initialState = {
    number: 0,
};

const counter = (state = initialState, action) => {
    switch (action.type) {               
        case PLUS_ONE:
            return {
                number: state.number +1
            }
        case MINUS_ONE:
            return {
                number: state.number -1
            }

        default:
            return state;
    }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

>전체적으로 적용을 해주기

▼

import { PLUS_ONE, MINUS_ONE } from './redux/modules/counter';

>사용할 곳에서 import로 받아와서

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { PLUS_ONE, MINUS_ONE } from './redux/modules/counter';  // import로 받아오고

function App() {

  // useSelector사용
  // 여기에서 store로 접근하여, counter의 값을 읽어오고 싶다면?

  const counter = useSelector(function (state) {
    return state.counter;
  });

  // dispatch를 가져오기
  const dispatch = useDispatch();


  console.log("counter ->", counter.number);

  return (
    <>
      <div>현재 카운트 : {counter.number}</div>

      <button onClick={function () {
        dispatch({
          type: PLUS_ONE, // 이렇게 넣어주면 됨 
          payload: ''
        })
      }}>+</button>

      <button onClick={function () {
        dispatch({
          type: MINUS_ONE,
          payload: ''
        })
      }}>-</button>

    </>

  )
}

export default App

> 마찬가지로 같이 적용을 시켜준다.

---

action creators

action value를 return하는 함수

// action value
export const PLUS_ONE = "PLUS_ONE"  // export를 해줘서 전역에서 사용이 가능하도록 함
export const MINUS_ONE = "MINUS_ONE"


// action creator : action value를 return하는 함수
// 컴포넌트에서 사용해야 하므로 export해주고
export const plusOne = function(){
    return{
        type: PLUS_ONE,
    }
}

> 컴포넌트에서 사용해야 하니까 export해주고(상수로 생성)

> 함수안에서 객체를 return해준다.

// src/modules/counter.js

// action value
export const PLUS_ONE = "PLUS_ONE"  // export를 해줘서 전역에서 사용이 가능하도록 함
export const MINUS_ONE = "MINUS_ONE"


// action creator : action vallue를 return하는 함수
// 컴포넌트에서 사용해야 하므로 export해주고
export const plusOne = function(){
    return{
        type: PLUS_ONE,
    }
}


const initialState = {
    number: 0,
};

const counter = (state = initialState, action) => {
    switch (action.type) {                 // switch문_action에 있는 type에 따라서 {조건}의 작업을 수행할 것이다.

        case PLUS_ONE:
            return {
                number: state.number +1
            }
        case MINUS_ONE:
            return {
                number: state.number -1
            }

        default:
            return state;
    }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

▼

import { plusOne, minusOne } from './redux/modules/counter';

> 사용해야하는 컴포넌트에서 import해주고 

return (
    <>
      <div>현재 카운트 : {counter.number}</div>

      <button onClick={function () {
        // dispatch({
        //   type: PLUS_ONE, 
        // })
        dispatch(plusOne())
      }}>+</button>

      <button onClick={function () {
        // dispatch({
        //   type: MINUS_ONE,
        // })
        dispatch(minusOne())
      }}>-</button>

    </>

  )

> 바꿔주고

> plusOne(), minusOne()이 가르키는 return이 결국 action객체니까 저렇게 넣어준 것이다.

export const plusOne = function(){
    return{
        type: PLUS_ONE,
    }
}

export const minusOne = function(){
    return{
        type: MINUS_ONE,
    }
}

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { plusOne, minusOne } from './redux/modules/counter';

function App() {



  const counter = useSelector(function (state) {
    return state.counter;
  });


  const dispatch = useDispatch();


  console.log("counter ->", counter.number);

  return (
    <>
      <div>현재 카운트 : {counter.number}</div>

      <button onClick={function () {
        dispatch(plusOne())
      }}>+</button>

      <button onClick={function () {

        dispatch(minusOne())
      }}>-</button>

    </>

  )
}

export default App

> 바꾸면서 사용하지 않는 import PLUS_ONE, MINUS_ONE 지워줘도 된다.