教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この章では、redux で出てくる用語の解説をしていきます。ただ、いきなりこれを聞いてもわからないと思うので、次の章から redux を動かす簡単なチュートリアルを進めるときの辞書として使ってみてください。
reducer や middlware(後述)がどの処理を行うかを判断するために使われます。直接値を変更できないのでこのような方法が取られます。定数や typescript であれば enum で定義されることが多いです。
js1 Copied!const ACTION_TYPE = "ACTION_TYPE";
「どんな処理をするのか(= action type)」と「それに必要な引数(= payload)」が入ったオブジェクトを返す関数です。
view 側からこの action を dispatch(= redux に通知)することで redux のフローが実行されるという仕組みです。
js1234 Copied!const actionName = payload => ({
type: ACTION_TYPE
payload
});
action は純粋関数である必要があり、非同期処理などの副作用がある処理を行ってはいけません。
正確には、action type と payload を含むオブジェクトが action で、その action オブジェクトを返す関数は action creator と呼ばれています。毎回同じようなオブジェクトを定義するのが煩雑なのでこのような記述方法が一般的です。ライブラリ等を使ってもっと簡単に実装する方法もありますが、実装の意味を理解するためにもあえてフルスクラッチで実装しています。
しかしこのあたりを厳密に説明しだすと一気にややこしくなってしまうので、一旦はこうやって action を定義するもんなんだと思って進めてください。一通りこの教材を作り終わるころにはきっとこの話の意味がわかるようになっているでしょう。
payload と直前の state を受け取って次の state を返す関数です。redux におけるstoreは reducer を介さないと更新できない仕組みになっています。どのように状態を更新するかは action type で条件分岐をするのが一般的です。
js12345678 Copied!const reducer = (state = initState, { type, payload }) => {
switch (type) {
case ACTION_TYPE:
return newState(payload);
default:
return state;
}
};
基本的に非同期の処理(詳細には副作用のある処理)を行うところです。redux 自体には非同期を処理する機能は備わっていないので別のライブラリ(redux-thunk, redux-saga, redux-observable など)を使うのが一般的です。
middeware の関数はその内部で他の dispatch を行うことができます。よくある使われ方としては、非同期処理が解決されるまで待って解決されたらその値を dispatch するという使い方です。サーバーからのデータの取得や更新などで頻繁に行われます。
view から直接 middleware の関数を呼んだり、middlreware の処理を発火させるための action を実行したりします。この呼び出し方は使うライブラリによって異なります。
この部分は実際にカレンダーを作る部分で紹介していきます。
コードで直接的に記述する部分はほとんどありませんが、redux の状態そのものは store と呼ばれるオブジェクトです。この中に各 reducer に対応した state がネストして入っています。reducer を介してしか変更のできない immutable なグローバル変数です。
グローバル変数で状態を管理すると色々なところから変更ができて大変なことになりますが、それを immutable という制約で解決しているのが redux です。redux のアーキテクチャに乗っ取ることで安全にグローバルスコープの変数が使えるようになります。
この図では、reducer と store は別々のもののように思うかもしれないですが、実際は reducer は store に登録された関数です。
後の章で実装しながら説明しますが、上記のように reducer と state が 1 対 1 に対応しています。