React + Reduxのシンプルな雛形

概要

私はサーバーサイドのエンジニアですが、片手間にフロントもやってます。
業務でReact＋Reduxを使っているので、構成を参考にしつつシンプルな雛形を作りました。

このサンプルはテキストフォームに入力した内容を console.log で出力するシンプルな内容です。
React-Routerを使っている、２ページ構成です。

以下の手順で動作します

１．git clone
２．npm install (もしくは yarn install )
３．npm run start (もしくは yarn run start )
４．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など若干古いパッケージを使っているので、適宜最新のものを使うと良いでしょう。

package.json

{
  "name": "react-redux-sample",
  "version": "1.0.0",
  "main": "index.js",
  "author": "ryokwkm <[e-mail]>",
  "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