Riot.js Redux Rails 3 / 8 「formを追加しtitleの変更を可能にする」
はじめに
フロントにRiot.jsとReduxを使いサーバーサイドにRailsを使い、初めに環境構築し、次にReduxの使い方の流れをみて、最終的に簡単なTodoAppを作成する。
環境構築
- Riot.js Redux Rails 1 / 8 「環境構築」
簡単な例でReduxの流れをみる
- Riot.js Redux Rails 2 / 8 「Reduxを使ってtitleを表示させる」
- Riot.js Redux Rails 3 / 8 「formを追加しtitleの変更を可能にする」
- Riot.js Redux Rails 4 / 8 「3で作成したformを、title-formタグとして独立させる」
Todo Appの作成
- Riot.js Redux Rails 5 / 8 「Todoリストを表示する」
- Riot.js Redux Rails 6 / 8 「新たなTodoを追加出来るようにする」
- Riot.js Redux Rails 7 / 8 「完了したTodoをチェック出来るようにする」
- Riot.js Redux Rails 8 / 8 「チェックしてあるタスクを削除出来るようにする」
最終的に完成した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だけ変更出来る。