24.06.29 리덕스로 전역상태값 변경, 사용하기 / action Creator

// src/App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; // import 해주세요.

const App = () => {
    const dispatch = useDispatch();
    const number = useSelector((state) => state.counter.number);

    return (
        <div>
            <button
                onClick={() => {
                    dispatch({ type: 'PLUS_ONE' });
                }}
            >
                +1
            </button>
            <button
                onClick={() => {
                    dispatch({ type: 'MINUS_ONE' });
                }}
            >
                -1
            </button>
            <p>{number}</p>
        </div>
    );
};

export default App;

useDispatch()로 만들어진 dispatch는 함수로써 사용된다.

버튼에 화살표함수로 클릭시 dispatch({type: 'PLUS_ONE'})를 실행하게 하는데, dispatch는 인자값을 리듀서로 보낸다.

// src/modules/counter.js

// 초기 상태값
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;

리듀서에 action형태로 인자값이 들어오는데, switch(action.type)으로 작성했던 PLUS_ONE이나 MINUS_ONE이 들어온다.

해당 값에 따라 case가 달라져 return 값이 달라진다.

여기서 number: state.number+1으로 1을 더한 값을 상태값에 저장하거나 뺀 값을 상태값에 저장한다.

 

그리고 그것을 App.js에서 useSelector으로 가져온 number변수로 화면에 보여준다.

실행화면

 

---

// src/modules/counter.js

// 추가된 코드 👇 - 액션 value를 상수들로 만들어 줍니다. 보통 이렇게 한곳에 모여있습니다.
const PLUS_ONE = 'PLUS_ONE';
const MINUS_ONE = 'MINUS_ONE';

// 추가된 코드 👇 - Action Creator를 만들어 줍니다.
export const plusOne = () => {
    return {
        type: PLUS_ONE,
    };
};

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

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

// 리듀서
const counter = (state = initialState, action) => {
    switch (action.type) {
        case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다.
            return {
                number: state.number + 1,
            };
        case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다.
            return {
                number: state.number - 1,
            };
        default:
            return state;
    }
};

export default counter;

// src/App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
// 추가된 코드 👇 export한 action Creator를 import하기
import { minusOne, plusOne } from './redux/modules/counter';

const App = () => {
    const dispatch = useDispatch();
    const number = useSelector((state) => state.counter.number);

    return (
        <div>
            <button
                onClick={() => {
                // 변경된 코드 👇 export한 action Creator를 함수형태로 사용
                    dispatch(plusOne());
                }}
            >
                +1
            </button>
            <button
                onClick={() => {
                // 변경된 코드 👇 export한 action Creator를 함수형태로 사용
                    dispatch(minusOne());
                }}
            >
                -1
            </button>
            <p>{number}</p>
        </div>
    );
};

export default App;

 

굳이 사용해야하는가?

사용해야할 필요가 있다.

1.  1. action Creator을 미리 만들어두면, 리듀서에서 사용할 때 자동완성 기능이 제공되기 때문에, 휴먼에러를 방지할 수 있다.
2. 코드의 유지보수가 쉬워진다.
   • action Creator에서 type만 변경하면 원하는 기능으로 바꿀 수 있어 유지보수에 도움을 준다.
3. 코드 가독성이 높아진다.
   • action Creator을 작성해두면 타인이 볼 때에 해당 모듈이 가진 action이 어떤 것들이 있는지 module상에서 파악이 쉬워진다.

자세한 내용은 redux공식문서 확인