[TIL] 23_0130 Redux -Action Value Creator

Redux -Action Value Creator

중앙 데이터 관리소인 store에서 리듀서는 store에 들어있는 state(상태)를 제어해. 들어온 state값으로 지지고 볶아서 내보내주거나 보관하는겨.

 

초기 리듀서는 이렇게 고지식했어.

// counter.js

// 초기 상태값(state)

const initialState = {
  number: 0,
};

//원래라면
// const [number, setNumber] = useState(0); 지만 위처럼 바꾼거야.

// 리듀서 : "state에 변화를 일으키는"함수
// (1) state를 action의 type에 따라 변경하는 함수
// state를 action 안에 있는 type에 따라서 변경하는 작업

// input : state, action
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 counter;

이 경우, 이 리듀서를 수백개의 컴포넌트에서 사용한다고 가정하면 type의 이름을 컴포넌트에서 잘못써줄 수 있으니 이런 하드 코드로 쓰면

휴먼에러들이 발생할 수 있으니 지양해 이런 방식.

그래서 action-creator, action value를 사용할 거야

변수 형태로 관리하는 거지. 유지보수에 좋고 휴먼에러도 적어져.

 

 

그렇게 개선된 리듀서는 타입을 변수화하고 함수에 값을 담아서 리턴을 해주도록 개선됐어.

-객체형태의 action객체가 발생하면서 그 안의 타입의 value를 변수로 관리하는 action value와

- 그 value를 필요한 곳에서도 쓸 수 있게 함수화해서 값을 리턴해줘서

필요한 곳에서 가져다 쓸 수 있게 export 할 수 있는 action creator가 추가된 형태야.

 

-src/redux/modules/counter.js

action creator, action value 들어간 개선된 리듀서

// counter.js

// action value
export const PLUS_ONE = "plus_one";
export const MINUS_ONE = "minus_one";

// action creator : action value를 return하는 함수
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

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

// 초기 상태값(state)

const initialState = {
  number: 0,
};

//원래라면
// const [number, setNumber] = useState(0); 지만 위처럼 바꾼거야.

// 리듀서 : "state에 변화를 일으키는"함수
// (1) state를 action의 type에 따라 변경하는 함수
// state를 action 안에 있는 type에 따라서 변경하는 작업

// input : state, action
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 counter;

 

 

사용 방법

-리듀서에서 필요한 값형태를 담은 타입을 리턴하는 export하는 함수를 불러서 필요한 곳에 dispatch로 담는 거야.

 

-App.jsx

import { useDispatch, useSelector } from "react-redux";
import { MINUS_ONE, minusOne, plusOne } from "./redux/modules/counter.js";

function App() {
  // 여기에서 store에 접근해서, counter의 값을 읽어오고 싶어.
  const counter = useSelector((state) => {
    return state.counter;
  });

  console.log(counter.number);
  // dispatch를 가져올거야.
  const dispatch = useDispatch();

  return (
    <>
      <div>현재 카운트 : {counter.number}</div>
      <button
        onClick={() => {
          // +1을 해주는 로직을 써주면 돼.
          // 이걸 써주려면 store에 있는 리듀서가 정해놓은 방식을 써야해.
          dispatch(plusOne());
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(minusOne());
        }}
      >
        -
      </button>
    </>
  );
}

export default App;

 

 

 

느낀 점

-개선된 리듀서는 변수로 관리하기 때문에 안의 형태가 바뀌어도 가져오는 값은 같아서 유지보수가 전보다 편해. 일일이 찾아가서 형태를 짜줘야하는 게 귀찮긴 하지만 전역에서 값을 쓸 수 있으니 좋은 것 같긴 해.