Reduxとはなんぞ
Hiroki Matsumoto基礎を学ぶための教材集め
Redux習得のゴール = ToDoリストを作る
Reduxを学ぶ意味 = 実務する上で習得が必須なライブラリ
とりあえず公式チュートリアル
Zennの記事
Qiitaの記事
Udemy
いやー頭がいたいですね。できることからやっていきましょう。
Hiroki MatsumotoReact で State を管理するのはやめたほうがよい?
コンポーネント内でロジックを書くことになっていしまい、のちのち技術的な負債になってしまう可能性がある。
なので、ビューとロジックは切り分けたほうがよいという認識でOK?
Redux で状態管理をする意義
開発当初は状態管理が単純なものでも、後に新しい状態管理が増え、ロジックや状態管理が複雑になると、スケール(拡張)するのが難しいが、Reduxだと比較的簡単にスケールできる的なやつ?
Hiroki MatsumotoRedux の前に Flux の概念を理解したほうがよさそう
いろいろ調べた結果、Flux、MVC、MVVMは理解したほうが良さそう。
Hiroki Matsumoto座学よりもハンズオンで学べ
Hiroki Matsumotoで、Reduxとは?
コンポーネントの状態を一箇所で管理するためのライブラリ。
アプリケーションの状態を管理する場所をStoreというっぽい。
Hiroki MatsumotoReact × Redux × TypeScriptの環境を構築しよう
まずは、いつもどおりcreate-react-appで環境構築。
npx create-react-app myapp --template typescript
Redux をインストール
ReactでReduxを使うには、reduxとreact-reduxという2つのライブラリが必要。
npm install react-redux @types/react-redux
useSelector でエラーがでた
プロパティ 'hoge' は型 'DefaultRootState' に存在しません。ts(2339)
useSelectorの第一引数の関数の引数に型をつけていなかったため。
TypeScript環境だと👇のコードはエラーになります。
const count = useSelector((state) => state.count);
一旦anyで解決しました。練習だからゆるしてね。
const count = useSelector((state: any) => state.count);
Hiroki MatsumotoReduxデータの変更方法
useSelectorでstoreにアクセスして、useDispatch(更新関数)でactionを渡してtypeプロパティに応じてstateを書き換えるという認識。
Hiroki MatsumotoActionとReducerとStoreとDispatch
Store
アプリケーションのすべての状態を持つオブジェクト。
とりあえずRedux触ってみたほうがわかりやすい。
ProviderにStoreを渡して、useSelectorを使ってどのコンポーネントからでもStore内の状態アクセスできるようにしている。
Storeに関しては、一度使うと概念がわかりやすかった。
Action
どんなことが起きたかと、状態を持ったオブジェクト。
Dispatchを渡してStoreに送るやつ。
const action = {
// どんなことが起きたか
type: 'INCREMENT',
// 以下は状態(state)
count: state + 1,
}
Dispatch
ActionをStoreに送るメソッド
Reduxでは、useDispatchを使う。
import { useDispatch } from 'react-redux';
const dispatch = useDispatch();
const incrimet = (action) => {
dispatch({type: 'ADD', payload: action});
}
Dispatchの概念がまだあやふや、認識間違っているかも。
Reducer
Dispatchから渡ってきた情報を元に、状態を更新する関数。
Hiroki MatsumotoRedux のフォルダ構成
ducksかre-ducksを覚えておけばよい。