React + Reduxのシンプルな雛形
概要
私はサーバーサイドのエンジニアですが、片手間にフロントもやってます。 業務でReact+Reduxを使っているので、構成を参考にしつつシンプルな雛形を作りました。
https://github.com/ryokwkm/react-redux-sample.git
このサンプルはテキストフォームに入力した内容を console.log で出力するシンプルな内容です。 React-Routerを使っている、2ページ構成です。
以下の手順で動作します
1.git clone 2.npm install (もしくは yarn install ) 3.npm run start (もしくは yarn run start ) 4.webpackサーバーが起動するので、コンソール出力されたURLにアクセスする 例: http://localhost:8083/
ディレクトリ構造
├── public │ └── index.html ├── src │ ├── Handler.jsx │ ├── actions │ │ └── index.js │ ├── compornents │ │ ├── About.jsx │ │ └── App.jsx │ ├── reducers │ │ └── index.js │ └── store │ └── configurte-store.js ├── stylesheets │ └── index.scss ├── .eslintrc.js ├── README.md ├── package-lock.json ├── package.json
各ファイルの解説
Action, Reducer, Compornentsの各階層ごとにディレクトリを切ってある。
src/actions/*.js src/compornents/*.jsx src/reducers/*.js
src/Handler.jsx 一番最初に読まれるJS React-RouterによるRouting、 その他の初期処理を読み込んでいる。
src/store/configurte-store.js Storeの設定を行っている。 Middlewareの読み込みや、Reducerとの紐付け、Redux-Devtoolの設定など。 Middlewareは、redux-thunkのみ使用している。
使用パッケージ
使用しているパッケージは以下のとおり es2015など若干古いパッケージを使っているので、適宜最新のものを使うと良いでしょう。
{ "name": "react-redux-sample", "version": "1.0.0", "main": "index.js", "author": "ryokwkm <ryokwkm@gmail.com>", "license": "MIT", "description": "react redux simple code", "dependencies": { "babel-core": "6.25.0", "babel-loader": "7.1.1", "babel-preset-es2015": "6.24.1", "babel-preset-react": "6.24.1", "css-loader": "0.28.4", "extract-text-webpack-plugin": "^3.0.2", "import-glob-loader": "1.1.0", "node-sass": "4.5.3", "prop-types": "15.5.10", "query-string": "5.0.0", "react": "15.6.1", "react-dom": "15.6.1", "react-redux": "5.0.6", "react-router-dom": "4.1.2", "redux": "3.7.2", "redux-devtools": "3.4.0", "redux-devtools-extension": "2.13.2", "redux-thunk": "2.2.0", "sass-loader": "6.0.6", "style-loader": "0.18.2", "webpack": "3.3.0", "webpack-dev-server": "2.11.3" }, "devDependencies": { "eslint": "^3.19.0", "eslint-config-airbnb": "^15.0.2", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^5.1.1", "eslint-plugin-react": "^7.1.0" }, "scripts": { "start": "./node_modules/.bin/webpack-dev-server" } }
reduxを使った感想
結論としては、大規模なアプリでない場合、Reactだけで十分だと感じました。 Reactは比較的簡単ですが、Reduxは難易度が高いことが主な理由です。
学習も必要な上に、コード量、複雑性が増します。 開発コストは増大するでしょう。
ソースをキレイに分割できるので、管理のしやすさは上がります。 ですが、そこまで大規模でないアプリでしたらReactのみで十分な印象です。
以下の記事ではReduxの開発者のコメントを紹介をしていますが、無理して導入する必要はない旨が書いてあります。 https://techracho.bpsinc.jp/hachi8833/2018_03_13/53183