react、reduxでアプリを作る
【前回】
学習内容
今回参考にしたqiita
1. プロジェクトを作成する
$ create-react-app countapp_redux $ cd countapp_redux $ yarn start #成功
いつもの画面が表示される
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
記事通りにコマンドを打ったがエラー発生 下記記事を参考にしてエラー解決を計る。
$ 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
完成時のフォルダー構成
.
├── 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
