初めてのReactでredux-zeroを試してみる

どこに行ってもReact、React。
Ionicから始まりずっとAngularを使っていた自分としてはいつも肩身が狭いなと感じていたのですが、この度簡易版Reduxのredux-zeroなるライブラリがあることを知りました。
Redux好きの自分としては是非とも試してみたい!ということで、これを機にReactの勉強がてらredux-zeroでReduxを実装してみようと思います。

1.ベースプロジェクト作成

TypeScript好きとしては、ReactでもTypeScriptを使いたい!ということで、下記記事を参考にベースを作成します。
React + TypeScript + Webpackの最小構成

2.ローカルサーバーを立てる

webpack-dev-serverを使って、ローカルサーバーを立てます。

npm install webpack-dev-server html-webpack-plugin --save-dev

webpack.config、package.jsonも修正しておきます。

// webpack.config.dev.js
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/Index.tsx",
  output: {
      filename: "bundle.js",
      path: __dirname + "/dist"
  },

  devServer: {
    contentBase: "dist",
    port: 8080
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
      rules: [
          // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
          { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

          // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
      ]
  },

  // webpack plugins
  plugins: [
    new HtmlWebpackPlugin({
        template: './index.html',
        filename: 'index.html',
        inject: 'body'
    })
  ]
};
// package.json
{
  "scripts": {
    "build": "webpack --colors --config ./webpack.config.dev.js",
    "build:prod": "webpack --config ./webpack.config.prod.js",
    "serve": "webpack-dev-server --config ./webpack.config.dev.js",
  },

3.redux-zeroを実装する。

下記記事を参考に、まずはreact-reduxを使用したReduxのベースプロジェクトを作成し、その状態からredux-zeroを導入します。
React + Redux + TypeScriptの最小構成

両ライブラリの違いがわかり、とても勉強になります。。
redux-zeroの導入手順に関しては、qiitaにまとめておきました。
[React.js]TypeScriptでRedux-zeroを使ってみる

所感

  • Reducerがなくなるとスッキリして良い。
  • サクッとアプリが作れそう。
  • やっぱReactよりAngularが好き。 
The following two tabs change content below.
Akihiro Tanaka

Akihiro Tanaka

Engineer/UI Designer
UI設計を得意とするエンジニア。 現在はDApps開発しています。
好きな言語はTypeScript、好きなフレームワークはIonic、Angular。 趣味はハーレー、キャンプ、アンティーク。
WEB: http://tanakas.org/