Action

まずはじめに、いくつかActionを定義しましょう。

Action は情報の本体であり、アプリケーションからStoreへ送るデータです。そしてStoreのための、唯一の 情報源です。store.dispatch()を使うことで、ActionはStoreに送られます。

下記はActionの例です。新しいTodo項目の追加を表しています。

const ADD_TODO = 'ADD_TODO'

{
  type: ADD_TODO,
  text: '初めてのReduxアプリをつくる'
}

Actionは単なるJavaScriptのオブジェクトです。Actionは必ずtypeプロパティを持ちます。typeプロパティが、実行されるActionのタイプを示しているのです。一般的には、文字列の定数として定義すべきです。そしてアプリが大きくなったら、Actionタイプを別のモジュールへ移したくなるかもしれません。

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

常用文についての注意

別ファイルで、Actionタイプの定数を定義する必要はありません。というより定義すること自体、しなくても構いません。小さなプロジェクトなら、Actionタイプとして文字列リテラルを使うだけにした方が簡単でしょう。しかし大きなコードベースでは明示的に定数を宣言することに、いくつか利点があります。詳しくは、常用文の削減を読んでください。コードベースを綺麗に保つ、実践的なコツが書かれています。

type以外の、Actionオブジェクトの構造はすべてあなた次第です。 Actionの構成方法に関するおすすめは、Fluxの標準Action（Flux Standard Action）で確認できます。

ユーザーが完了したTodo項目にチェックできるよう、もう1つActionタイプを加えましょう。特定のTodo項目は、indexで参照します。indexを配列で保持しているからです。実際のアプリでは、何か新しいものが作られるたびにユニークIDを生成する方が賢明です。

{
  type: TOGGLE_TODO,
  index: 5
}

それぞれのActionで渡すデータは、できるだけ小さくしましょう。例えば、Todoオブジェクト全体よりも、indexを渡す方が良いです。

最後に、もう1つActionタイプを加えましょう。いま表示されるTodo項目を変更するための、Actionタイプです。

{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Actionクリエイター

Actionクリエイター はその名の通り、Actionを作る関数です。 “Action”と“Actionクリエイター”は混同しやすいので、正しい用語を使うように注意してください。

Reduxでは、Actionクリエイターは単純にActionを返します：

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

これによって移動が可能となり、テストも簡単になります。

従来のFlux（traditional Flux）ではよく、Actionクリエイターが呼び出されたときにDispatch（送信）を起こします：

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

Reduxでは、そんなことは ありません。
その代わりDispachを実際に始動するため、dispatch()関数にActionクリエイターの呼び出し結果を渡します：

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

または、自動でDispachする バウンドActionクリエイター（bound action creator） を作ることもできます：

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

こうすると、直接的に呼び出せます：

boundAddTodo(text)
boundCompleteTodo(index)

dispatch()関数は、store.dispatch()としてStoreから直接利用できます。しかし、ヘルパーを使って利用することが多いでしょう。react-reduxのconnect()などです。bindActionCreators()を使うと、自動的に多くのActionクリエイターをdispatch()関数にバインド（結び付ける、束縛）できます。

Actionクリエイターは非同期でも良いし、副作用も持てます。 詳しくは上級チュートリアルにある、非同期なActionを読んでください。AJAXのレスポンスを処理し、Actionクリエイターを非同期な制御フローに組み立てる方法を学べます。初級チュートリアルを終えるまで、非同期なActionに飛ばないでください。 初級チュートリアルには上級チュートリアルと非同期なActionの前に必要となる、重要なコンセプトが含まれています。

ソースコード

actions.js

/*
 * Actionタイプ
 */

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

/*
 * 他の定数
 */

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

/*
 * Actionクリエイター
 */

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 }
}

次のステップ

これからReducerを定義しましょう！ActionをDispatchしたとき、どうやって状態更新するか指定するためです。