Redux -- Modern React with Redux の Udemy Course 221~230 をやってみた
what is Redux
Vuex の React 版？
Vuex と同じで、グローバルな状態変数管理のライブラリのハズ。
公式サイトによれば、Actions, Reducers, Store, Dispatch, Selectors, がある
Reference
公式サイト
Modern React with Redux | Udemy
買った Udemy のコース
Course 221から始める
思想
Modify and Return で、 基本的に何かを付け足す時には、直接付け足して返すことはせず
コピーをとってそれに付け足して返すようにする
保険の契約履歴を作る時も
配列から何かをフィルターする時も、そのものを変更させることは絶対にしない。
概念整理
Actions
呼び出す関数。createPolicy(name, amount) (誰といくらの契約を作成するか) など
Type
Form の種類。CLAIM (金額が欲しい)など
Payload
Form の Type の詳細。欲しがっている人、欲しがっている金額など
Reducers
Action をもとに起こる変化。
部門ごとに create されたらリストに追加し、delete されたらリストから削除する
作るシステムの説明
insurance company 保険会社の POLICY システム
policy という概念がまず難しい
保険証券で、保証する内容の契約のことらしい。
Actions
何かを起こす関数。
createPolicy, deletePolicy, -- 契約を作成、破棄する
const createPolicy = (name, amount) => {
return {
type: 'CREATE_POLICY',
payload: { name, amount,}
}
}
const deletePolicy = (name) => {
return {
type: 'DELETE_POLICY',
payload: {name,}
}
}
名前と金額が何ドルか？からポリシー( 契約)を作り
名前からポリシーを特定して破棄する関数 ( action? )
かえでと（契約で会社に支払われた） 50 ドルの契約を作る
かえでの契約を廃棄（支払いが終わったから？サブスクをやめたから？）
〜のように使えると解釈する
createClaim --- 誰にいくら渡すかの要求をつくる
const createClaim = (name, amountOfMoneyToCollect) => {
return {
type: 'CREATE_CLAIM',
payload: {
{ name, amountOfMoneyToCollect, }
},
}
}
名前と集めるお金の量から、クレームを作る action
かえでに（病気で） 50 ドル払うという要求を作れるものと解釈する
Reducers
アクションが起こった時に、何かを変える関数。
ここでは部門の関数。
クレーム（金の要求）が作成された時に、過去のクレームリストに、今起こったクレームを追加したり
ポリシー（契約）が作成された時に、契約リストに追加したり
契約から誰かが削除された時に、契約リストを削除した名前を含まないものに更新したりする
cliamsHistory -- 過去の要求リストに今起こった要求を追加
const cliamsHistory = (oldListOfClaims = [], action) => {
if (action.type === 'CREATE_CLAIM') {
return [...oldListOfClaims, action.payload]
}
return oldListOfClaims
}
クレーム、要求の履歴
クレームを作成するアクションでは、過去のクレームリストをコピーして
現在作成されたクレームの詳細を、そのコピーの後ろに付け足して返す
クレームを作成するアクションでなければ、過去のクレームリストをそのまま返す
accounting -- 現在の保険会社の残高計算
const accounting = (bagOfMoney = 100, action) => {
if(action.type === 'CREATE_CLAIM') {
return bagOfMoney - action.payload.amountOfMoneyToCollect
} else if (action.type === 'CREATE_POLICY') {
return bagOfMoney + action.payload.amount
}
return bagOfMoney
}
会計関数
銀行の財産は引数がなければ 100 ドルがデフォルト
クレームを作成した時には
銀行の財産から 渡す金額を差し引く。
ポリシー、支払い契約を作成した時には
銀行の財産に契約で得られた量の金額をプラスする
policies -- 契約リストに 今 (作成 or 削除) された契約を (追加 or 削除)
const policies = (listOfPolicies = [], action) => {
if (action.type === 'CREATE_POLICY') {
return [...listOfPolicies, action.payload.name]
} else if (action.type === 'DELETE_POLICY') {
return listOfPolicies.filter(name => name !== action.payload.name)
}
}
ポリシーの部門関数
ポリシーを作成する時
ポリシーリストに、先ほどと同じように作成したときの詳細から名前を追加
ポリシーを削除する時
ポリシーリストのコピーにその名前を除外し、返す。
Redux として機能させる
Redux を読み込んで
const {createStore, combineReducers} = Redux
const ourDepartments = combineReducers({
accounting,
claimsHistory,
policies,
})
const store = createStore(ourDepartments)
createStore, combineReducers, のライブラリを使えるようにする
そして部門を結合する。
その結合した部門からストアを作成。
動作確認する
store.dispatch(action) で動かせる。
store.dispatch(createPolicy('Alex', 20))
store.dispatch(createPolicy('Jim', 30))
store.dispatch(createClaim('Alex', 100))
store.dispatch(deletePolicy('Jim'))
store.getState()
console.log(store.getState())
Alex と 20 ドルで契約
Jim と 30 ドルで契約
Alex に 100 ドル 要求されて支払う
Jim と解約
Console was cleared
iframeConsoleRunner-…704c013047d712.js:1
{accounting: 50, claimsHistory: Array(2), policies: Array(1)}
accounting: 50
claimsHistory: (2) [Array(0), {…}]
policies: Array(1)
0: "Alex"
length: 1
[[Prototype]]: Array(0)
このように正しく計算された。
まとめ
保険契約の作成、削除、支払い要求の作成
などの Actions を作成して
契約リスト、要求履歴、会計、
などの Actions に基づく各部門の Reducer を作成して
Redux で部門結合して store を作成
dispatch で各 Actions を動かしていく
といった動作になる！！！！
図を多用した詳しい動画での解説が非常に丁寧なのでおすすめです。2000 円くらい。
https://codepen.io/sgrider/pres/oQjBvG
この人が公開しているソースはこちらです
