Action Creator

액션 객체의 value를 일일이 변경하는 것이 아닌 한 곳에서 관리 할 수 있는 함수와 액선 value를 상수로 만들어서 사용하는 것이 하드코딩도 덜하고 Human error도 줄일 수 있다. 또 유지 보수에도 효율적이다.
참고 문서: 공식 문서

// 리듀서 함수가 있는 파일
// counter.js
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 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;
  }
};

Payload

사용자 입력값을 받아와 저장해줄 수 있는데 payload를 사용해서 구현할 수 있다. 꼭 값의 이름이 키의 이름이 payload일 필요는 없지만 커뮤니티 best practice로 공유되면서 이를 많이 사용하고 있다고 한다.

// counter.js
const ADD_NUMBER = "ADD_NUMBER";
const SUBTRACT_NUMBER = "SUBTRACT_NUMBER"

// action creator
export const addNumber = (payload) => {
	return {
		type: ADD_NUMBER,
		payload
	}
}
export const subtractNumber = (payload) => {
	return {
		type: SUBTRACT_NUMBER,
		payload
	}
}

// 리듀서 함수, state를 리턴하는
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    case SUBTRACT_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

App.jsx에서는 dispatch에 액션 생성자 함수를 담고 매개변수로 유저 입력값을 전해주면 된다.

Ducks 패턴

Redux 앱을 구성할 때 사용하는 방법론 중 하나로, 위의 코드에서 한 것처럼 액션 타입, 액션 생성자 함수, 리듀서를 모두 하나의 파일에서 구성하는 방식이라고 한다. 또한 아래의 작성 방식을 따른다.

1. Reducer 함수를 export default 한다.
2. Action creator 함수들을 export 한다.
3. Action type은 app/reducer/ACTION_TYPE 형태로 작성한다.