Help us understand the problem. What is going on with this article?

Redux入門 2日目 Reduxの基本・Actions(公式ドキュメント和訳)

More than 3 years have passed since last update.

前回 Redux入門 1日目 Reduxとは

前回に引き続き、reduxの公式ドキュメントを辿りながら、ざっくり和訳していきます。
2章からはTodoアプリを作成しながらReduxのそれぞれの要素を順番に解説していきます。

2.1 Actions

  • actionはアプリケーションからの情報をstoreへ送る為のオブジェクト
  • actionは store.dispatch()でstoreへ送られます
  • actionは、何を行なうものかを識別するために"type"プロパティを必ず持つ。他のプロパティについては自由。
const ADD_TODO = 'ADD_TODO'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}
  • typeの値は文字列。アプリケーションが大きくなる場合は、typeの定義値を別モジュールにするとよい
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'
  • 下記はTODOが終わったことを伝えるアクション。どのアイテムを参照するかをindexに記載してます。実際にはユニークなIDを発行して使用するのがいいでしょう
{
  type: COMPLETE_TODO,
  index: 5
}
  • 下記は表示モードを切り替えるactionです
{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Action Creators

action creatorsは、その名の通りactionを生成するメソッドです。

  • Fluxでは、action creator内でactionを作成して、そのままdispatchまでを行なうのが一般的です
function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text
  }
  dispatch(action)
}
  • 対してReduxでは、シンプルにactionを作るだけです。その方がテストしやすいからです。
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
  • dispatchするときはcreatorで作成したactionを渡します。
dispatch(addTodo(text))
dispatch(completeTodo(index))
  • または、bound action creator としてdispatchまでを行なうcreatorを別途用意します
const boundAddTodo = (text) => dispatch(addTodo(text))
const boundCompleteTodo = (index) => dispatch(completeTodo(index))
  • react-reduxライブラリのconnectをimportして、ヘルパーのbindActionCreators()を使うのもいいでしょう
import { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)

続き Redux入門 3日目 Reduxの基本・Reducers

kitagawamac
フロントエンドエンジニア speakerdeck https://speakerdeck.com/kitagawa312
toreta
飲食店向け予約/顧客台帳サービス「トレタ」、超直前予約アプリ「トレタnow」を開発・提供するスタートアップ企業です。
https://corp.toreta.in
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした