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

今日やったこと

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

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

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

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

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

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ページを作成しました。もしよろしければご覧ください。

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