[7주차] 리액트숙련: Action Values, Action Creators

Action Values

action객체의 type의 이름을 좀 더 자세히 써줘야 한다.

 

"PLUS/ONE" => "counter/PLUS_ONE" 이렇게!

하지만, 이런식으로 하드코딩을 하다보면 오타 등 휴먼에러가 있을 수 있기 때문에 이것을 관리하는 action creator와 action values 를 사용한다.

 

변수형태로 관리하기 위해선 상수로, 리듀서가 있는 counter.js 맨 위에 아래 코드를 선언한다. 그리고 이것을 App 컴포넌트에서도 써야 하기 때문에 export 해준다.

// counter.js

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

 

전체코드

// counter.js

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


// 초기 상태값 (state)
const initialState = {
  number: 0,
};

// 리듀서 작성하기 (state에 변화를 일으키는 함수)
// (1) state를 action의 type 에 따라 변경하는 함수

// input에는 state, action을 받음
// action에는 type, value가 포함되어 있다
const counter = (state= initialState, action) => {
  console.log('state in module counter',state);
  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;

 

이제, App 컴포넌트에서 상수를 import 하고 적용해준다.

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

 

전체코드 (+만 action value로 관리함. 아직 -는 안한 상태)

import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import { PLUS_ONE } from './redux/modules/counter';

function App() {

  // 여기에서 Store 에 접근하여, counter의 값을 읽고싶다
  // useSelector (인자로 콜백함수가 들어감, 그 함수의 인자는 스토어 안에 있는 전체 state)
  const counter = useSelector((state)=> {
    return state.counter;
  })

  console.log('counter', counter.number);

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

  return (
    <div >
      현재카운트 : {counter.number}
      <button onClick={()=>{
        // +1 을 해주는 로직을 써주면 된다.
        // dispatch 가져오기
        dispatch({
          type: PLUS_ONE,
          // payload : '';
        })
      }}>+</button>
      <button onClick={()=>{
        dispatch({
          type: 'MINUS_ONE',
        })
      }}>-</button>
    </div>
  );
}

export default App;

 

 

 

따라서, action type 이름이 다른 것들과 겹치는 일이 발생했을 때 이름 변경이 필요하다면 상수선언에서만 바꿔주면 된다.

//전
export const PLUS_ONE = "PLUS_ONE";
//후
export const PLUS_ONE = "counter/PLUS_ONE";

 

 

---

Action Creators

 

action value 를 통해서 만들어지는 action 객체도 휴먼에러가 많이 생길 수 있기 때문에 액션 객체를 만들어주는 action creator 를 사용해야 한다.

 

//counter.js

// action creator : action value를 Return 하는 함수
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  }
  //action 객체를 리턴
}

 

그럼 다음, App 컴포넌트에 import 해준다.

 

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

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

 

 

전체코드

// counter.js

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

// action creator : action value를 Return 하는 함수
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  }
  //action 객체를 리턴
}

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

// 초기 상태값 (state)
const initialState = {
  number: 0,
};

// 리듀서 작성하기 (state에 변화를 일으키는 함수)
// (1) state를 action의 type 에 따라 변경하는 함수

// input에는 state, action을 받음
// action에는 type, value가 포함되어 있다
const counter = (state= initialState, action) => {
  console.log('state in module counter',state);
  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;

 

 

 

App.jsx

import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import { PLUS_ONE } from './redux/modules/counter';
import { MINUS_ONE } from './redux/modules/counter';
import { plusOne } from './redux/modules/counter';
import { minusOne } from './redux/modules/counter';

function App() {

  // 여기에서 Store 에 접근하여, counter의 값을 읽고싶다
  // useSelector (인자로 콜백함수가 들어감, 그 함수의 인자는 스토어 안에 있는 전체 state)
  const counter = useSelector((state)=> {
    return state.counter;
  })

  console.log('counter', counter.number);

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

  return (
    <div >
      현재카운트 : {counter.number}
      <button onClick={()=>{
        // +1 을 해주는 로직을 써주면 된다.
        // dispatch 가져오기
        dispatch(plusOne());
      }}>+</button>
      <button onClick={()=>{
        dispatch(minusOne());
      }}>-</button>
    </div>
  );
}

export default App;