redux

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

More than 1 year has 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