react - redux - redux-actions

redux-actions

액션에 해당하는 내용을 매번 함수로 정의하기는 번거롭기 때문에
redux-actions 모듈 기능인 createAction, createActions를 이용해 보다 쉽게 액션 함수를 생성할 수 있다.

// 스크립트 추가
<script src="https://www.unpkg.com/redux-actions@2.6.5/dist/redux-actions.js"></script>

// 기능 꺼내오기
const { createAction, createActions, handleActions } = ReduxActions;

초기값

const initialState = 0;

액션

const INCREMENT = 'count/INCREASE';
const DECREMENT = 'count/DECREASE';

createAction 사용
첫번재 인자로 전달되는 문자열은 action의 type속성값,
두번째 인자로 전달되는 콜백함수는 return 값을 자동으로 payload 속성 값으로 담는다.
콜백 함수의 매개변수(여기서는 amount)는 dispatch 호출 시 전달되는 값을 전달하며 이를 통해 payload에 담는 값을 설정할 수 있다.

const increase = createAction(INCREMENT, (amount = 1) => ({ incrementValue : amount }));
const decrease = createAction(DECREMENT, (amount = 1) => ({ decrementValue : amount }));

createActions 사용
여러개의 액션 함수를 한 번에 생성할 수 있다.
createActions는 객체 형태의 파라미터를 전달한다.
그 객체 안에 액션 함수 설정을 작성한다.
접두사가 있기 때문에 대괄호를 이용해서 키 식별자를 작성한다.

• 전달하는 객체의 key 값( [INCREMENT] ) : action의 type 속성 값

• value 값의 함수가 반환하는 값( (amount = 1) => ({ incrementValue : amount }) ): payload의 속성 값

action type 속성 값에 따라 반환되는 객체의 키 값이 설정된다. EX) 반환된객체.count.increment

반환되는 객체 값을 확인해보면
count 안에 increase, decrease 함수가 들어있는 형태이다.

그 값을 다시 구조분해할당한 형태이다.
const { count : { increase, decrease } }

const { count : { increase, decrease } } = createActions({
        [INCREMENT] : (amount = 1) => ({ incrementValue : amount }),
        [DECREMENT] : (amount = 1) => ({ decrementValue : amount })
      });

리듀서 리듀서 함수는 `handleActions` 기능을 사용하여 간결하게 작성할 수 있다. handleActions도 객체형태의 파라미터를 전달받는다. key값으로 action의 type이 들어간다.(여기서는 [INCREMENT] ) `handleActions`: 첫번째 인자 state, 두번째 인자 action을 전달받는다. 중첩 구조분해할당으로 payload 값을 꺼내 콜백 함수 안에서 사용할 수 있다. dispatch 호출 시 전달된 action의 type과 일치하는 함수를 동작 시키게된다.
payload 값을 꺼내올 때 중첩구조분해할당하여 미리 가져온 형태

const reducer = handleActions({
      [INCREMENT] : ( state, { payload : { incrementValue }}) => {
           return state + incrementValue;
            },
      [DECREMENT] : ( state, { payload : { decrementValue }}) => {
                return state - decrementValue;
            }

}, initialState);	// 두번째 인자로 초기 값(initialState)을 설정할 수 있다. 아래 이미지와 동일한 설정

payload 중첩구조분해할당하지않은 버전 ``` [INCREMENT] : ( state, action ) => { return state + action.payload.incrementValue; }, ```