Learn プログ

-マナビメモ-

Riot.js Redux Rails 3 / 8 「formを追加しtitleの変更を可能にする」

はじめに

フロントにRiot.jsとReduxを使いサーバーサイドにRailsを使い、初めに環境構築し、次にReduxの使い方の流れをみて、最終的に簡単なTodoAppを作成する。

環境構築

簡単な例でReduxの流れをみる

Todo Appの作成

最終的に完成したTodo App
https://github.com/atfeo/Riot_Redux_Rails

参考
+ RiotJS and Redux - Part 2 + Redux入門【ダイジェスト版】10分で理解するReduxの基礎

formを追加しtitleの変更を可能にする

sample-outputタグにformを追加

<!-- ./client/tags/sample-output.tag -->
<h1>{this.opts.store.getState().title}</h1>
<form onsubmit={changeTitle}>
  <input type="text" name="newTitle">
  <input type="submit" value="Change Title">
</form>

これでChange Titleボタンを押すとchangeTitleメソッドが実行されるようになる。

sample-outputタグにscriptを追加

changeTitleメソッドを実装していく。

// ./client/tags/sample-output.tag
</form>

<script>
  changeTitle() {
    if (!this.newTitle.value) {
      return;
    }
    this.opts.store.dispatch({ type: 'CHANGE_TITLE', data: this.newTitle.value })
    this.newTitle.value = ''
  }
</script>

store.dispatch(action)でreducerにdispatchの引数であるactionを渡す。
今回のactionは{ type: 'CHANGE_TITLE', data: this.newTitle.value }

Reducerでのactionの処理

受け取ったactionのtypeによって新しいstateを返すように書き換える。

// ./client/src/index.js
function reducer(state = { title: 'Default title' }, action) {
  switch (action.type) {
    case 'CHANGE_TITLE': {
      const newState = { title: action.data };
      return newState;
    }
    default:
      return state;
  }
}

これでDefault Titleをフォームに入力した文字に変更出来るようになったので、ブラウザでlocalhost:5000を更新して確認。

リファクタリング

// ./client/src/index.js
function reducer(state = { title: 'Default title' }, action) {
  switch (action.type) {
    case 'CHANGE_TITLE':
      return Object.assign({}, state, { title: action.data });
    default:
      return state;
  }
}

このようにしておくとstateにtitleの他にbody等がある時({ title: ~, body: ~ })、リファクタリング前だとbodyも改めて書かないとtitleだけになってしまうが、リファクタリング後はbodyを書かなくてもtitleだけ変更出来る。

Riot.js Redux Rails 4 / 8に続く