【プログラマー必読】Reduxを使いこなそう！【レデューサー機能の扱い方】

Reduxの世界で、どうやって「Math.random() i」のようなものを形成するのでしょう？

 

Reduxの信条の1つは、レデューサー機能は純粋なものでなければならないということです。乱数を生み出したり、現在の日付を知りたいといった純粋でない何かを行いたい時はどうしますか？

 

要点：純粋な機能とは何でしょう？

純粋な機能はこれらの規則に則ります。

• ・副作用がない-機能の範囲外で何かを変えることはできません。(引数の修正ができないことも意味しています。)
• ・同じ入力につき同じ出力-入出力時には、毎回同じ戻り値を生じなければなりません。(要求の間は状態が保存されないことを意味します。)

 

 

不純な機能とは以下のようなものです：

 

 

引数の１つを修正するので、不純になります。

 

これがもう１つの不純な機能の例です。

 

同じ入力を行った時異なる結果が返ってくることが予想されるので、これは不純です。

「ジョー」や「スミス」などの異なる人名を3回呼びかけてみてください。すると、3つの異なる年齢の人々が返ってくるでしょう。

 

Redux内にある不純な価値

さぁ、不純なことをしてみましょう。サイコロを振って出た結果をReduxに設置しましょう。

 

私たちはすでにレデューサーが純粋でなければならないことを知っているので、レデューサー内に「Math.random() 」を呼ぶことができません。引数を通じて不純なものを入れなければなりません。ここに私たちのレデューサーがあります：

 

 

私たちが影響を与えることのできる唯一の引数がアクションです。アクションを送ることで影響を与えることが可能になります。

そのために私たちがすること：アクション内に乱数を入れましょう。

 

 

オプション1：アクション・クリエイターの内部

直接の方法がここにあります：アクション・クリエイターで乱数を生み出しましょう。

 

 

それから「dispatch(rollDice())」と一緒にいつものようにそれを送りましょう。

 

長所：単純であること。

短所：不純なためテストするのが難しいこと。「expect(rollDice().die1).toBeCloseTo(3)」をどうしますか？このテストはよく失敗します。

 

 

オプション2：アクション・クリエイターに渡す

少しだけ複雑な方法をここで紹介します：アクション・クリエイターに対する引数として、乱数を渡しましょう。

 

 

 

長所：アクション・クリエイターは純粋かつテストしやすいものです。

「expect(rollDice(1, 2).die1).toEqual(1)」

 

短所：このアクション・クリエイターを呼ぶものは何でも、乱数の生み出し方を知っていなければなりません。その論理はアクション・クリエイター内に含まれていませんが、「randomRoll」機能の中にはほとんど含まれています。

 

 

 

レデューサーの話に戻りましょう・・・

 

 

あなたがどのオプションを選択しても、レデューサーは同じです。レデューサーはアクション内で、値に基づき新しい状態を返します。

 

 

 

終わりに

レデューサーにおける不純物の価値について語ることはそれほど多くありません。

 

要約すると：

• ・レデューサーは純粋でなければなりません!レデューサー内で「Math.random() 」や「new Date().getTime() 」、「Date.now() 」などを呼び込んではいけません。
• ・書くのは簡単でテストするのは難しいのですが、アクション・クリエイター内で不純な操作を実行しましょう。あるいは、テストするのは簡単で書くのが難しいのですが、アクション・クリエイター内でその価値を超えましょう。

 

 

 

※本稿は 「Roll the Dice: Random Numbers in Redux」を翻訳・再編集したものです。