react、reduxでアプリを作る

【前回】

gakkie.hatenadiary.com

学習内容

今回参考にしたqiita

qiita.com

1. プロジェクトを作成する

$ create-react-app countapp_redux
$ cd countapp_redux
$ yarn start

 #成功

いつもの画面が表示される f:id:shuzou555:20200315015019p:plain

2. 必要なパッケージをインストールする

mba-2:countapp_redux #{myname}$ yarn add redux, react-redux
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/redux,: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/#{myname}/projects/countapp_redux/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

#error

記事通りにコマンドを打ったがエラー発生 下記記事を参考にしてエラー解決を計る。

qiita.com

$ yarn add redux
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ redux@4.0.5
info All dependencies
├─ redux@4.0.5
└─ symbol-observable@1.2.0
✨  Done in 6.17s.
$ yarn add react-redux
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > eslint-config-react-app@5.2.0" has incorrect peer dependency "eslint-plugin-flowtype@3.x".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ react-redux@7.2.0
info All dependencies
├─ hoist-non-react-statics@3.3.2
└─ react-redux@7.2.0
✨  Done in 7.75s.

3. Reduxによるカウントアプリを実装する

mba-2:countapp_redux $ cd src
$ mkdir actions
$ cd actions/
$ touch index.js
#reducers/count.js

//Action定義
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

//Action Creater(Action Createrを呼び出すことで、stateの更新が行われる)
export const increment = () =>({
    type : INCREMENT
});

export const decrement = () =>({
    type : DECREMENT
});

4. アプリを動かす

$ cd projects/countapp_redux/
$ yarn start

f:id:shuzou555:20200315024338p:plain
完成画面

完成時のフォルダー構成

.
 ├──  node_modules
 ├──  public
 ├──  src
      ├── actions
          └── index.js
      ├── components
          └── Counter.js
      ├── reducers
          ├──count.js
          └── index.js  
      ├── index.js        
      └──  serviceWorker.js 
      ├── index.css
      └── index.js
 ├── yarn.lock
 ├── package.json
 └── README.md