Push: Ctrl+Y

 技術で遊んで ときどき進む

React+Redux入門

React + Redux入門④ - 検索画面を作成2:外観と動作をつくる

2016/07/26

検索画面の動作を設計し、外観を作成するところまでやります!
次回、非同期DB処理までやっていったん完了のつもり。

今回の完成図。

スクリーンショット 2016-07-02 9.14.23

検索画面の動作を考える

DBに直接データを入れて検索するのでも良いのですが、今回は「検索エディットボックスにデータ入力して、同じものがなければ新規登録ボタンが表示されて登録できる」みたいな動作にします。

Stateの設計

先にデータの流れがどうなるかを考えてから作らないとえらいことになるので、設計やります。
結果は Reducer に記載していく感じなので、編集しましょう。

流れは以下の通りです。

  1. 検索ワードを入力すると searchWord が変化
  2. 検索実行で isProcessing がtrueに変更されてLoadingが表示される
  3. 検索成功で searchList に結果が入って一覧が表示される
  4. 検索失敗で aleartMessage にエラーメッセージが入り、ダイアログ表示される
  5. 検索ワードがDBに存在しない場合は isAddMode がtrueに変わり、新規登録ボタンが表示される

 

Material-UIで画面作成

ReactComponentを作成していきます。
Material-UIを利用しますが、公式サイトのサンプルがしっかりしているので大体コピペでいけるのがうれしい。

 

検索エリアを作成

まず、検索窓と検索結果の表示エリアのComponentを作成します。

検索ワード(searchWord)・検索結果(searchedList)・新規登録ボタンの表示非表示の結果(isAddMode)を受け取って、それぞれ表示を分けています。

次に、それらの情報を管理するためのContainerを作成します。

<MuiThemeProvider> は、Material-UIのv0.15.0では必須なのでデフォルトテーマを入れています。

第一回で説明したとおり、

  1. connectStoreの変化を監視
  2. 変化があるとmapStateToProps(state)が実行され、SearchContainerのpropsが変化
  3. render() 内でSearchに流し込んでいるprops(searchWordなど)も変化することで表示内容が変わる

という流れです。
いったん表示だけ確認したいので、ルーティングを設定します。

これで npm run build -> npm start コマンドで以下のような画面が表示されるはずです。

スクリーンショット 2016-07-01 22.03.32

 

ダイアログ追加

Loadingダイアログと、エラー発生時のAlertDialogを同じように追加していきます。
Componentにダイアログ2つ分を新規作成しましょう。

Material-UIのダイアログを作成し、モーダルウィンドウでユーザー操作不可にしてあります。

こちらはOKボタンで閉じられる作りです。
propsで上位から流れてくるmessageに文字列が入っている場合に表示されます。

この2つをContainerに加えます。

外観はこんなかんじです。
ここに動作を加えていきます。

 

ActionとReducerで動作を作成

必要な動作は、

  • 検索エディットに文字を入れたとき(handleChangeSearchWord
  • エンターを押したとき(handleEnterSearchEdit
  • 新規作成ボタンを押したとき(handleOnClickRegisterBtn
  • アラートダイアログのOKボタンを押したとき(handleOnClickOkBtn

の4つです。
動作したときにStoreを変更する必要があるので、ContainerからそのままActionを呼ぶ形になります。

 

ReactComponent

とりあえず、Componentから。

次に、Containerに実際の動作を追加していきます。
Action部分は未実装なので、この後作っていきます。

これもだいたい第一回で説明したとおりです。

 

Actions作成

Containerで追加したActionを作成します。
非同期処理部分は次回に追加するのでいったん仮置きしました。

 

Reducer

Actionを受け取るReducerを作成します。
Reducerは副作用のない純関数にするというReduxルールがあるので、自然と単純なものになります。

これでbuildしてstartすれば、動作確認ができるはずです。

 

まとめ

Material-UIの使い方で迷ったときは、GitHubでの検索が便利です。

次回は非同期処理を作成していきます。
いよいよ最後になる・・よていです。

 

 

-React+Redux入門
-, , ,

おすすめの記事

1
React + Redux入門① - Reduxの概念を理解

React+Reduxでサイトを作っているので、復習がてら「検索画面を作成する」 ...

2
React + Redux + D3.js アニメーション:ドラッグ&ドロップでキングスライムを作った

はい、今回は要素のドラッグ&ドロップを中心に作ってみました。 Mater ...