初めての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

Smart Contract Engineer
Since 2009, I have been a software engineer at Accenture for 9 years, managing, designing, and developing many services, mainly web and mobile apps.
In 2013, I met Bitcoin and started to work on blockchain-related development in 2018, developing an entertainment DApp for underground idols, a blockchain analysis tool, and an STO platform.
Currently, I am working as a Smart Contract Engineer at Secured Finance, developing a DeFi product.

WEB: https://tanakas.org/