리듀서_Actions

Actions은 application에서 store로 데이터를 보내기 위한 정보의 payload이며, 오직 store를 위한 소스이다.

store.dispatch()를 사용하여 Actions를 store에 보낸다.

새로운 todo item 추가를 위한 action

const ADD_TODO = 'ADD_TODO'

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

Actions의 특징

  1. Plain javascript objects이다.
  2. type property 속성을 가져야 한다.
    • type:
      • 수행 중인 작업 유형을 나타낸다.
      • 일반적으로 문자열 상수로 정의해야 한다.

app의 규모가 커서 Actions을 분리된 모듈로 사용하기 원한다면

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

type을 제외하곤 action object 구조는 사용자 선택적이다.

사용자가 todo의 추가를 완료했음을 표현하기 위한 action type을 추가한다. todo를 배열에 저장하기 때문에, 특정 todo에 접근하기 위한 index를 사용한다. 하지만 실제 app에서는 새로운 todo를 생성할 때마다 Unique ID를 생성하는 것이 더 현명하다.

{
  type: TOGGLE_TODO,
  index: 5
}

각 actions에서는 가능한 작은 data를 넘기는 것이 좋다. 예를들면 전체 todo object를 넘기는 것보다 index를 넘기는 것이 더 좋다.

마지막으로, 현재 보이는 todos를 변경하기 위한 action type을 추가한다.

{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Actions Creators

Action creators는 actions를 생성하기 위한 함수이다.
“action”과 “action creator”의 용어를 혼동하기가 쉽기 때문에, 적절한 용어를 사용하는 것이 중요하다.

리덕스에서 action creator는 단순히 action을 리턴한다.

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

기존의 Flux에서는, action creators를 dispatch에 trigger하였지만

function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text
  }
  dispatch(action)
}

Redux에서는 dispatch를 시작하려면, 결과를 dispatch() function에 넘겨줘야 한다.

dispatch(addTodo(text))
dispatch(completeTodo(index))

추가적으로, 자동적으로 dispatches할 수 있는 bound action creator를 사용할 수 있다.

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

직접적으로 해당 함수를 호출할 수 있다.

boundAddTodo(text)
boundCompleteTodo(index)

dispatch() function은 store.dispatch() 처럼 store로 직접 접근할 수 있지만. react-redux의 connect()와 같은 helper를 사용하여 접근하는 것이 더 낫다.

Action crators는 비동기적이며 부수효과를 가지고 있다. 어떻게 Ajax reponses 다루고 비동기 제어 flow를 구성하는지 배우려면 async actions 참조한다.

Source Code

actions.js
/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

원문: https://redux.js.org/basics/actions