Redux Basics (1): Actions 翻訳

はじめに

• Redux Basics (1): Actions 翻訳
• Redux Basics (2): Reducers 翻訳
• Redux Basics (3): Store 翻訳
• Redux Basics (4): Data Flow 翻訳
• Redux Basics (5): Usage with React 翻訳

Reduxの勉強のため、公式サイトのBasicsのActionsを翻訳します。翻訳で間違いがあると思いますがそこはご了承ください。
翻訳は下記ページの10/31時点のものとなります。
http://redux.js.org/docs/basics/
http://redux.js.org/docs/basics/Actions.html

翻訳ここから

Basics

reducerやミドルウェア、storeの増強構造について話す幻想に惑わされないでください。Reduxは信じられないほどシンプルです。もしあなたがこれまでにFluxアプリケーションを構築したことがあるならば、あなたは完全に熟知しているでしょう。もしFluxになじみがなければ、これは非常に簡単です！

このガイドでは、シンプルなToDoリストの構築の過程を通って歩きます。

• Actions
• Reducers
• Store
• Data Flow
• Usage with React
• Example: Todo List

Actions

最初に、いくつかのActionを定義しましょう。

Actionは、あなたのアプリケーションからstoreデータを送信する情報のペイロードです。これらはただのstoreのための情報のソースです。store.dispatch()を使うことでstoreにそれらを送信します。

const ADD_TODO = 'ADD_TODO'

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

Actionは単純なJavaScriptのオブジェクトです。Actionは行われる行動の種類を示すtypeプロパティを持たなければなりません。種類は一般的にstringの定数で定義されるべきです。あなたのアプリが一旦大きくなると、分割されたモジュールの中へそれらを移動したいでしょう。

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

注記
分割したファイルのなかでAction Typeの定数を定義してはなりませんし、定義さえしてはなりません。小さなプロジェクトでは、Action Typeのために文字列リテラルをただ使うのは簡単です。しかしながら、大きなコードベースの中ではっきりと定数を宣言することはくらかの恩恵があります。あなたのコードベースをきれいに保ちつづけるために、より多くの実践的なtipsをReducing Boilerplateで読んでください。

type以外に、Actionオブジェクトの構造は本当にあなた次第です。もし興味があれば、どのよにActionが構築されるかのおすすめとしてFlux Standard Actionをチェックしてください。

我々は完了したとしてTodoにユーザーの印をつけるのを表すために一つのAction Typeを追加します。我々はindexによって特定のTodoを参照します、なぜなら我々は配列にそれらを保存しているからです。実際のアプリでは、何か新しいものが作られたときいつでもユニークなIDを生成するのが賢明です。

{
  type: TOGGLE_TODO,
  index: 5
}

できるだけ各Ationで小さなデータになるように渡すのは良いアイデアです。例えば、全てのTodoオブジェクトよりもindexを渡すのが良いです。

最後に、我々は現在の見えているTodoを変えるための一つのAction Typeを追加します。

{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Action Creators

Action creatorsはこの通り、Actionを作成する関数です。"action"と"action creator"の用語を混ぜ合わせるのは簡単ですが、適切な用語を使うのがあなたにはベストです。

ReduxのAction Creatorはただ単にActionを返します:

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

これはテストするのに継続可能で簡単にします。

伝統的なFluxでは、Action Creatorはしばしば起動されたときにdispatchの引き金となります。

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

Reduxではこの場合はありません。

代わりに、実際にdispatchを開始するために、dispatch()関数へ結果を渡します:

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

あるいは、あなたは自動的にdispatchする結合された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()のようなヘルパーを使うことでアクセスする可能性が高いです。あなたはdispatch()関数へ多くのAction Creatorを自動的に結びつけるためにbindActionCreators()を使うことができます。

Action Creatorはまた非同期で副作用を持つこともできます。あなたは、どのようにAJAXの応答を取扱い、非同期な制御の流れへAction Creatorを構成するかを学ぶために、advanced tutorialのなかでasync actionsを読むことができます。発展的なチュートリアルと非同期Actionのために不可欠である重要なコンセプトをカバーする基礎のチュートリアルが終わっていないのでasync actionsへ前へスキップしないでください。

ソースコード

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

次のステップ

あなたがこれらのActionを送るときに、どのようにstateが更新されるかを特定するためにいくつかのReducerを定義しましょう。

翻訳ここまで

おわりに

要約すると下記のとおりかと思います。

• Action
• Actionは行動の種類をもつ単純なJavaScriptオブジェクト
• Stringで定義されるtypeプロパティを必ず持つ
• Action Creator
• Actionを作成する関数
• Fluxではdispatch()を実行するがReduxでは実行しない

次は、Redux Basics (2): Reducers 翻訳です。