カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

Redux の登場人物

この章では、redux で出てくる用語の解説をしていきます。ただ、いきなりこれを聞いてもわからないと思うので、次の章から redux を動かす簡単なチュートリアルを進めるときの辞書として使ってみてください。

action type

reducer や middlware(後述)がどの処理を行うかを判断するために使われます。直接値を変更できないのでこのような方法が取られます。定数や typescript であれば enum で定義されることが多いです。

js
1
Copied!
const ACTION_TYPE = "ACTION_TYPE";

action

「どんな処理をするのか(= action type)」と「それに必要な引数(= payload)」が入ったオブジェクトを返す関数です。

view 側からこの action を dispatch(= redux に通知)することで redux のフローが実行されるという仕組みです。

js
1234
Copied!
const actionName = payload => ({ type: ACTION_TYPE payload });

action は純粋関数である必要があり、非同期処理などの副作用がある処理を行ってはいけません。

もっと詳しく

正確には、action type と payload を含むオブジェクトが action で、その action オブジェクトを返す関数は action creator と呼ばれています。毎回同じようなオブジェクトを定義するのが煩雑なのでこのような記述方法が一般的です。ライブラリ等を使ってもっと簡単に実装する方法もありますが、実装の意味を理解するためにもあえてフルスクラッチで実装しています。

しかしこのあたりを厳密に説明しだすと一気にややこしくなってしまうので、一旦はこうやって action を定義するもんなんだと思って進めてください。一通りこの教材を作り終わるころにはきっとこの話の意味がわかるようになっているでしょう。

reducer

payload と直前の state を受け取って次の state を返す関数です。redux におけるstoreは reducer を介さないと更新できない仕組みになっています。どのように状態を更新するかは action type で条件分岐をするのが一般的です。

js
12345678
Copied!
const reducer = (state = initState, { type, payload }) => { switch (type) { case ACTION_TYPE: return newState(payload); default: return state; } };

middleware

基本的に非同期の処理(詳細には副作用のある処理)を行うところです。redux 自体には非同期を処理する機能は備わっていないので別のライブラリ(redux-thunk, redux-saga, redux-observable など)を使うのが一般的です。

middeware の関数はその内部で他の dispatch を行うことができます。よくある使われ方としては、非同期処理が解決されるまで待って解決されたらその値を dispatch するという使い方です。サーバーからのデータの取得や更新などで頻繁に行われます。

view から直接 middleware の関数を呼んだり、middlreware の処理を発火させるための action を実行したりします。この呼び出し方は使うライブラリによって異なります。

この部分は実際にカレンダーを作る部分で紹介していきます。

store

コードで直接的に記述する部分はほとんどありませんが、redux の状態そのものは store と呼ばれるオブジェクトです。この中に各 reducer に対応した state がネストして入っています。reducer を介してしか変更のできない immutable なグローバル変数です。

グローバル変数で状態を管理すると色々なところから変更ができて大変なことになりますが、それを immutable という制約で解決しているのが redux です。redux のアーキテクチャに乗っ取ることで安全にグローバルスコープの変数が使えるようになります。

もっと詳しく

この図では、reducer と store は別々のもののように思うかもしれないですが、実際は reducer は store に登録された関数です。

後の章で実装しながら説明しますが、上記のように reducer と state が 1 対 1 に対応しています。

現在のパート (1)
全パート (68)
みんなで助け合おう!
現在のパートのディスカッション 全1件
1-2
大平 礼 2020-08-06
文章中の記述が誤字っている?

はじめに

大変わかりやすい教材をありがとうございます。
非常に楽しく勉強させて頂いております!

本文中に誤字を発見したかもしれませんので、共有致します。
もし意図通りの文章であった場合、ご容赦下さい。

該当箇所

reducer

redux における関数は reducer を介さないと更新できない仕組みになっています。

誤字?

「redux における関数は」という部分は、「redux におけるstoreは」の間違いでしょうか?

少しでもお力になれれば、幸いです。