Actions

First, let's define some actions.

まずは”action”を定義しましょう。

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Action は情報の貨物のようなもので、アプリケーションからの情報を store へと運びます。Action は store へと運ばれる唯一の情報源です。store.dispatch() を使ってaction を store へと運ぶことができます。

Here's an example action which represents adding a new todo item:

次のサンプルは、新しい todo アイテムを追加する action です。

const ADD_TODO = 'ADD_TODO'

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

Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants. Once your app is large enough, you may want to move them into a separate module.

Action は単なるJSオブジェクトです。Action は必ず type プロパティを持たなくてはいけません。これによって実行されるアクションがどれなのかを示します。Typeは一般的に文字列の定数によって定義されます。アプリケーションが大きくなってきた場合には、これらを分割したモジュールで管理することもできます。(訳注: type: 'ADDTODO'のように直接文字列を指定することもできるが、一旦 const ADD_TODO = 'ADD_TODO' のように定数として定義してから、type: ADD_TODO と定数を使って定義する方が良いということ。また、この const ADD_TODO の部分だけを別モジュールに切り出して、以下のように import すると、アプリケーションが大きくなった際に見通しが良いということ。)

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

Note on Boilerplate

You don't have to define action type constants in a separate file, or even to define them at all. For a small project, it might be easier to just use string literals for action types. However, there are some benefits to explicitly declaring constants in larger codebases. Read Reducing Boilerplate for more practical tips on keeping your codebase clean.

Action タイプを定数で定義し別々のファイルに分ける必要がない、もしくはそもそも定数で定義する必要もない場合もあるでしょう。とりわけ小さなプロジェクトにおいては、単に文字列でaction タイプを指定するだけでいいかもしれません。しかし、コードが大きくなってきた場合には、action typeを定数で宣言しておく利点があります。より実践的な内容に関しては、次の記事を読んで下さい。

Other than type, the structure of an action object is really up to you. If you're interested, check out Flux Standard Action for recommendations on how actions could be constructed.

typeの他にも、action オブジェクトには、どのような構造をも持たせることができます。興味があれば次の記事を読んで、action のオススメの構造について学んでください。

We'll add one more action type to describe a user ticking off a todo as completed. We refer to a particular todo by index because we store them in an array. In a real app, it is wiser to generate a unique ID every time something new is created.

今回はもう一つ action を追加しましょう。todo リストが完了した際に実行されるアクションです。特定の todo アイテムを index によって参照します。todo アイテムは store の中に配列として持つことになるので、これを index によって参照します。実際のアプリケーションにおいては、新しいアイテムが作られる度に、ユニークなIDを生成することになるでしょう。

{
  type: TOGGLE_TODO,
  index: 5
}

It's a good idea to pass as little data in each action as possible. For example, it's better to pass index than the whole todo object.

なるべく少ない情報をactionには与えるほうがいいでしょう。例えばtodoオブジェクト全体を渡すよりも、indexだけを渡す方が良い、といったようなことです。

Finally, we'll add one more action type for changing the currently visible todos.

最後に、もう一つアクションタイプを追加します。これは現在のタスクの表示非表示を切り替えるためのものです。

{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Action Creators

Action creators are exactly that—functions that create actions. It's easy to conflate the terms “action” and “action creator,” so do your best to use the proper term.

Action creator はアクションを作る関数です。action と　action creator は混同しやすいので、適切な言葉を使うように注意してください。

In Redux action creators simply return an action:

Redux の action creator は単純に、action を return します。

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

This makes them portable and easy to test.

こうすることで、取り回しがよくなり、かつ、テストも容易になります。

In traditional Flux, action creators often trigger a dispatch when invoked, like so:

伝統的なFluxにおいては、アクションクリエイターは呼び出された場合に、たいていの場合、dispatchをもトリガーするものでした。

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

In Redux this is not the case.
Instead, to actually initiate a dispatch, pass the result to the dispatch() function:

しかし、Redux においてはそうではありません。その代わりに、dispatch を起動するために、その funtion の return の結果を dispatch() 関数へと渡すのです。

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

Alternatively, you can create a bound action creator that automatically dispatches:

他の方法として bound action creator を作る方法もあります。これは自動的に dispatch を呼び出すものです。

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

Now you'll be able to call them directly:

こうすることで、これらの dispatch を直接実行することができます。(訳注：addTodo という action クリエイターと dispatach を関連付けた関数、boudAddTodoを作って、これを呼び出せば、アクションクリエイターもdispatchも同時に実行されるので、毎回それぞれを書かなくて良いので便利。)

boundAddTodo(text)
boundCompleteTodo(index)

The dispatch() function can be accessed directly from the store as store.dispatch(), but more likely you'll access it using a helper like react-redux's connect(). You can use bindActionCreators() to automatically bind many action creators to a dispatch() function.

dispatch() 関数は、storeから直接、store.dispatch() という形でアクセすることができます。ですが、より使われるのは、react-redux の connect() というヘルパー関数を用いて、アクセスする方法です。さらにbindActionCreators() を複数のactionクリエイターを dispatch() 関数に紐付けることもできます。

Action creators can also be asynchronous and have side-effects. You can read about async actions in the advanced tutorial to learn how to handle AJAX responses and compose action creators into async control flow. Don't skip ahead to async actions until you've completed the basics tutorial, as it covers other important concepts that are prerequisite for the advanced tutorial and async actions.

Actionクリエイターは非同期で、かつ副次的効果をもたらしてしまいます。 async actions を読んで、AJAXの返答や、action creator を同期的なフローの中に組み込む方法を学習してください。async action に進むのは、reduxの基本的なチュートリアルを終えてからにしてください。基本的なチュートリアルには、より高度なチュートリアルと、それからasync action の理解に必要な、重要な前提知識が含まれているからです。

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

Next Steps

Now let's define some reducers to specify how the state updates when you dispatch these actions!

次はreducerを定義していきましょう。これによって、action がディスパッチされた際に、どのようにstateをアップデートするかを定義します。