Redux学習 その3 : Reduxの応用

2023.09.09

前回では、

  • Reducerの結合について
  • Redux Thunk ミドルウェアについて

を学びました。

今回は、今までの基礎を使っての応用になりそうです。

Redux を使用してカウンターを記述する

いきなりですが、Reduxを使用したカウンターを作成しました。

下記が課題になります。

このレッスンでは、Redux を使用したシンプルなカウンターをゼロから実装します。 基本的な部分はコードエディターに用意してありますが、詳細は皆さんが記述する必要があります。 用意された名前を使用して、incAction と decAction というアクションクリエイター、counterReducer()、および INCREMENT と DECREMENT というアクションタイプを定義し、最後に Redux store を定義してください。 完成すると、INCREMENT または DECREMENT アクションをディスパッチして、store に保持されている state を 1 増やすまたは 1 減らすことができるようになります。 初めての Redux アプリを作成できるようがんばってください！

https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/redux/write-a-counter-with-redux

解答は下記のようになりました。

state を決してミューテートしない

以前の記事 で勉強していたのですが、

Reactでは、値が直接変更してはならず、新しいオブジェクトを生成する必要がありました。

なので、push ( )およびsplice ( )のような関数は配列を直接変更変更するので使用できません。

よく使用する関数としては、map(),filter()などのようです。

これは、Reduxにも当てはまるようです。

以下のような課題がありました。

コードエディターに、To-do アイテムを管理する store と reducer があります。 リデューサーの ADD_TO_DO case を書き換えて、state の末尾に新しい To-do を追加してください。
標準的な JavaScript または ES6 を使用して、いくつかの方法でこのことを実行できます。 
action.todo からのアイテムが末尾に追加された新しい配列を返す方法を見つけてください。

https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/redux/never-mutate-state

解答は下記のようになりました。(CodeSandBoxでエラーが出ているのは、今回の課題ではdispatchの記述やtodoの値がなかったため解答のみCodeSandBox上で表示しています。)

return […state, action.todo] の部分は return state.concat(action.todo);でも大丈夫でした。

配列でスプレッド演算子を使用する

ES6からスプレッド演算子”…”が使用できるようになったようです。

下記のようなコードを記述します。

let newArray = [...myArray];

このコードの意味としては、newArrayがmyArrayの複製(クローン)になります。

なので、どちらもPCのメモリ内に別のものとして作成されるようです。

また、スプレッド構文を用いて配列を複製して新しい配列を追加する場合、

[...myArray, 'newvalue'];

とすることができます。

下記のコードを試しに実行してみると、、、

となりました。

クローンなので同じものかという問いには

const isSameObj = originalArray === newArray; // false

同じものを参照しているかについては、

const isSameValue = originalArray[0] === newArray[0]; // true

となっていました。

課題としては下記のようなものがありました。

スプレッド演算子を使用して、To-do が追加されたときに state の新しいコピーを返してください。

https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/redux/use-the-spread-operator-on-arrays

解答としては下記のようになりました。(CodeSandBoxでエラーが出ていますが、解答のみCodeSandBox上で表示しています。)

となりました。

配列からアイテムを削除する

配列からアイテムを削除するには、

slice() や concat()メソッドがあるようです。

下記のような課題がありました。

アイテムのインデックスに基づいて配列からアイテムを削除するように、リデューサーとアクションクリエイターを変更しました。 レデューサーの記述を完成させて、指定されたインデックスのアイテムが削除された、新しい state 配列を返すようにしてください。

https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/redux/remove-an-item-from-an-array

下記のような解答になりました。

Object.assign を使用してオブジェクトをコピーする

state が object の場合にも状態の不変性 (イミュータビリティ) を強制して、オブジェクトを扱うのに便利なツールとして Object.assign() があるそうです。

const newObject = Object.assign({}, obj1, obj2);

1 つ目の引数として空のオブジェクトを渡し、その後にコピーしたいオブジェクトを渡します。

下記のような課題がありました。

Redux の state とアクションが、state に対して object を処理するように変更されました。 status プロパティを文字列 online に設定する、タイプが ONLINE のアクションに対して、新しい state オブジェクトを返すようにコードを編集してください。 チャレンジを完了するには Object.assign() を使用してください。

https://www.freecodecamp.org/japanese/learn/front-end-development-libraries/redux/copy-an-object-with-object-assign

解答は下記のようになりました。

今回は、Reduxの応用でした。

stateはミューテートしない出会ったり、stateがオブジェクトの場合には、 Object.assign()を使用するようです。

イメージがつきにくいので作成していく中でもう少し煮詰めていこうと思います。

タイトルとURLをコピーしました