update.ReactJS+Reduxで非同期Actionの実装をし、コンポーネントの再利用をするECMAScript2015(es6)の基本的な開発環境でWebpackとbrowserifyを利用したes6のビルド環境を作成した。そこで、CSVファイルを読み込んで、その内容(1列目で正規表現にヒットする)を反映するサンプルを取り扱ったが、そのサンプルをReact/Reduxで実現してみたかった。そのサンプルでは非同期Actionとコンポーネントの再利用が必要で、実装するのに時間を要したので、環境構築方法も踏まえて、備忘録として記載。Webpackを利用したビルド環境Webpackを利用した。create-react-appをnpmコマンドでインストールして、ReactJS環境を作成するのもありだと思うが、同一のプロジェクトでes6だけで作り込んだページが存在したり、Vue.jsを利用して作成することもありえるので、それら包括するビルド環境も必要になると思い、ここではWebpackを利用した。Webpack以外でも実現はできると思うので、あくまで多少穿った個人的な意見。ディレクトリ構造ここでは下図のディレクトリ構造とした。自分で言うのも、あれだが、あまり良くない。インストールnode.jsがインストールされて、パスが通っている環境を構築した後、react/react_test/ディレクトリ配下で、下記を実行する。redux-thunkを導入しているのは、非同期のActionを利用しているため。css-loaderpackage.jsonインストールが完了すると、package.jsonが追加されているので、scriptsにproductionのビルドとdevelopmentのビルドを追加する。}}webpack.config.jswebpack.config.jsを作成する。Reactで開発したソースの拡張子はjsxとすることを前提。</body></html>スタイルシート下記cssをjsxで読み込む。red;}Action(非同期も含む)とState今回のサンプルでは同じコンポーネントを2つ利用(コンポーネントの再利用)しているためnameでどのコンポーネントのActionなのか区別している。onFileChangeは非同期のActionとして用意。処理が完了したタイミングで該当のActionをdispatchしている。}}ReducerAcitonとStateから新しいStateを作成する。コンポーネントの再利用をしているため、2つのStateを管理するようにしている。reducerComponentこのサンプルでContainerを細かく分けるかどうか悩んだが、備忘録も兼ねたかったので、細分化した。/>)Container(Componentの再利用)Componentだけど、複数のComponentを束ねているということでContainerとして位置づけた。コンポーネントを再利用しているため、demoAとdemoBの2つを用意した。mapDispatch)(DemoContainer)最後にapp.jsxでコンテナの呼び出しと、ストアを作成する。document.querySelector('.react_container'))サンプルの実行ビルドパターン1、パターン2のいずれかのコマンドでビルドする。developmentはデバッグができる。productioncsvファイル今回利用したcsvファイルはいつもと同様に以下。正規表現でhttpの形式にマッチしない場合はスキップされているかどうも確認できる。test.csvhttp://hogehoge/01ftp://hogehoge/02http://hogehoge/03http:/hogehoge/04http://hogehoge/05http://ほげほげ/06http://hogehoge/07http://hogehoge/08http://hogehoge/09デモindex.htmlをブラウザで開いて、test.csvを読み込ませると下図のようになる。Hiroyuki@hiroykam43歳、独身。しつつ、お仕事を探しています。暇なときにQiitaに投稿します。upLoginユーザーは見つかりませんでした。