プログラミング

React + Redux のチュートリアルをやってみた

投稿日：2016年6月20日 更新日：

1. はじめに

Read Me · Redux のチュートリアルをやってみたので、学んだことをメモします。

2. Redux について

Redux は実装のパターンです。

Redux と React を使ったこのサンプルアプリケーションは、おおよそ以下のような構成になっています。

Redux + React の構成イメージ

また、action、reducre, state の関係は以下のようになります（今回のチュートリアルにおいては）。

action、reducre, state の関係
  1. アプリケーションとして保持する値(state)のそれぞれに対して、1つずつ reducer を用意します（1:1対応）。つまり、ある1つの値を更新する処理は複数あっても 1つの reducre にまとめます。その中のどの処理を実行するかは、reducre に渡される action引数の type属性で判別します。
  2. action は、Container component 側から store.dispatch()メソッドを実行する際に渡すオブジェクトですが、store.dispatch()メソッドの内部では 1つ1つの reducerに渡されています。action と reducre は1:1対応であるとは限りません。複数の action が 1つの reducer で処理されることもありますので、N:1対応となります。

2. Action と Action Creator

  • Container 内の dispatch を実行するところで引数として使用する。
  • アプリケーション開発者が用意する。

Action

Action Creators

  • Actionを返す関数。

関連ソースコード

actions/index.js

  • ActionCreatorを定義しており、その中から Actionを返している。
...
export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}
...

containers/AddTodo.js

  • Container内のイベントリスナーで、Actionを引数にしてdispatchを実行している。
...
        dispatch(addTodo(input.value))
...

3. Reducers

  • state と action を受け取って、新しい state を返す関数。
  • アプリケーション開発者が用意する。
  • 副作用があってはいけない。
  • デフォルト引数を使えば、文字通りそれが初期値となる。
  • 複数作ることができる。
    • その場合は、combineReducers() でまとめることができる。

関連ソースコード

reducers/todos.js

  • Reducerを定義している。
...
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t =>
        todo(t, action)
      )
    default:
      return state
  }
}

export default todos

index.js

  • Reducerを createStoreに渡して Storeを生成している。
...
import todoApp from './reducers'
...
let store = createStore(todoApp)
...

4. Store

  • createStore()に、Reducer を渡して作成する。

用意されているメソッド

getState

  • 現在の state が取得できる。

dispatch

  • state を変更するような処理を実行する。

subscribe

  • このメソッドに関数を渡せば、dispatch のタイミングで実行してくれる。

State

  • 状態を表すオブジェクト
  • Redux側が管理する。Storeの中で保持される。
  • store.getState() で取得できる。
  • Stateを変更できるのは、dispatch のみである。
  • 階層的に値を保持できる（state tree と呼ばれる）。
  • データと UIの状態は、分けて保持するとよい。
  • データはなるべく正規化した状態で持つと良い。

関連ソースコード

index.js

  • Reducerを createStoreに渡して Storeを生成している。
...
import todoApp from './reducers'
...
let store = createStore(todoApp)
...

reducers/todos.js

  • Reducerを定義している。
  • Reducer のメソッドが返しているオブジェクトが Stateである。
...
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t =>
        todo(t, action)
      )
    default:
      return state
  }
}

export default todos

5. Provider

  • react-redux が提供する。
  • Redux と React を仲介する。
  • この Provider でラップされた Container は、内部で Store にアクセスできるようになる。
    • このおかげで、Container 内で直接 Storeにアクセスするコードを書く必要がなくなる。

関連ソースコード

index.js

  • AppというReactコンポーネントをラップしているのが、Providerである。
...
import { render } from 'react-dom'
import { Provider } from 'react-redux'
...
import App from './components/App'
...
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

6. Container

  • ReduxのStore と、プレゼンテーション層用のReactコンポーネントを仲介する層である。
    • 形式的には こちらもReactコンポーネントである。
    • connect() で、Container とプレゼンテーション層用のReactコンポーネントを紐付けることができる。
  • こちらのReactコンポーネントが、データ取得や stateの変更処理などを保持するおかげで、プレゼンテーション層用となるReactコンポーネントの再利用性が高まる。
  • connect()関数には、プレゼンテーション層用のReactコンポーネントに渡す値を用意するメソッドや、イベントハンドラを渡す。

関連ソースコード

containers/FilterLink.js

  • Container内で、mapStateToProps と mapDispatchToProps を定義し、connectを使って、ListというReactコンポーネントをラップした FilterLinkというReactコンポーネントを生成している。
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

7. 参考サイト

元のチュートリアルの内容が更新されると困るので、使用しているコードを以下に記載しておきます。

Example: Todo List

This is the complete source code of the tiny todo app we built during the basics tutorial.

Entry Point

index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Action Creators

actions/index.js
let nextTodoId = 0
export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

export const setVisibilityFilter = (filter) => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

export const toggleTodo = (id) => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

Reducers

reducers/todos.js
const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }

      return Object.assign({}, state, {
        completed: !state.completed
      })

    default:
      return state
  }
}

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t =>
        todo(t, action)
      )
    default:
      return state
  }
}

export default todos
reducers/visibilityFilter.js
const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

export default visibilityFilter
reducers/index.js
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp

Presentational Components

components/Todo.js
import React, { PropTypes } from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

export default Todo
components/TodoList.js
import React, { PropTypes } from 'react'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

export default TodoList
components/Link.js
import React, { PropTypes } from 'react'

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a href="#"
       onClick={e => {
         e.preventDefault()
         onClick()
       }}
    >
      {children}
    </a>
  )
}

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

export default Link
components/Footer.js
import React from 'react'
import FilterLink from '../containers/FilterLink'

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="SHOW_ALL">
      All
    </FilterLink>
    {", "}
    <FilterLink filter="SHOW_ACTIVE">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="SHOW_COMPLETED">
      Completed
    </FilterLink>
  </p>
)

export default Footer
components/App.js
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

export default App

Container Components

containers/VisibleTodoList.js
import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList
containers/FilterLink.js
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

Other Components

containers/AddTodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

引用元： Example: Todo List | Redux

📂-プログラミング
-

執筆者：labo

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

QRコードの画像ファイルから内容を読み取るWebページを作りました

目次1. はじめに2. スクリーンショット3. URL4. 操作と内容5. ソースコード6. 参考情報 1. はじめに QRコードの画像ファイルから内容を読み取る を作りました。 2. スクリーンショ …

Web Programming

IntersectionObserver API を使ったテストページを作成しました

IntersectionObserver API を使ったテストページを作成しました。 IntersectionObserver API は、ウェブページ上のある要素が見える範囲 (viewport) …

web development

Web Development for Beginners を読む：レッスン15, 16, 17

目次1. はじめに2. Part1: イントロダクション「継承」と「コンポジション」Pub/Sub パターン3. Part 2: canvas にヒーローとモンスターを描く4. Part 3: 動きを …

no image

ウェブプログラミングの知識があるとできること（その１）

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

PREV
Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法
NEXT
データのバックアップ(Windows)
↑