ゆるふわ技術日誌

ゆるくふわっと広く浅く。

原点回帰でreact-reduxでカウンターを作った #29

今日やったこと

原点回帰のつもりでもう一回イチからreact-reduxを使ってカウンターを作った

以前の記事で、後輩が作ったカウンターにReset機能を追加した…みたいな話がありましたが、やっぱりいろいろとわからないところが出てきたので、イチから作ってみました。

まずはcreate-react-appコマンドを使って雛形を作成し、npm install -S redux react-reduxで必要なライブラリをインストール。

後輩に習ったとおり以下の手順で進めました。

  1. actionsを書いて必要な機能を考える
  2. reducerを実装
  3. componentを実装

実際コレがわかりやすい気がします。

出来上がったコードはほぼ後輩の作ったものとおなじになってしまったので特に見なくて大丈夫ですが、一応置いておきます。

github.com

mapStateToPropsの部分

const mapStateToProps = (state) => {
  num: getNum(state)
}

まぁ慣れていればなんてことはないんですが、誤ってこう書いていました。

mapStateToProps() in Connect(render) must return a plain object. Instead received undefined.などと言われて怒られます。当然ですね。mapを返さないといけないので正しくは

const mapStateToProps = (state) => {
  return {
    num: getNum(state)
  };
}

こうです。ArrowFunctionの波括弧とmapの波括弧を見誤りました(言い訳)

とりあえず基礎的なところはなんとか分かるようになってきてる気がします。実践投入されたら即死しそうではありますが…。

雑談

aboutページを作成しました。もしよろしければご覧ください。

yurufuwa-tech.hatenablog.com

近いうちにGithub Pagesにもう少し詳しめなポートフォリオを用意します。