Reduxで状態を持つクラスインスタンスを管理する方法

Question

対象となるコードの例

class ListManager {
  constructor(url) {
    this._url = normalize(url);
    this._data = [];
  }
  getRequestObject() { // 差分のみを取得するためのリクエストオブジェクトを返す
    return {url: `${this._url}?from=${this._data.length}`};
  }
  update(response) { // getRequestObjectを使って帰ってきたデータを展開してデータに追加、データを返す
    this._data.push(parse(response));
    return this.get();
  }
  get() { // データを返す
    return this._data;
  }
}

let list;
const listfetch = new ListManager("http://api.example.com/v2/list");
request(listfetch.getRequestObject(), (err, response) => { // requestはHTTPを扱うライブラリ
  list = listfetch.update(response);
});

上記のようなクラスをReduxで使用したいのですが、どのようにlistfetchのようなクラスインスタンスを扱っていいのかわかりません。Storeの中にそのまま入れておいてもいいのでしょうか？

Answer 1

httpを扱うということなので、redux-thunk, redux-promise, redux-sagaなど、
非同期処理を扱うミドルウェアが必要になります。

具体的な方法・・・となると、一言では説明できないのですが、方針としては、

• this._dataをdataなどの名称でstoreとして管理する
• updateをactionとして定義する（サーバーからのfetchしstoreを更新する）
• dataは、react-reduxのconnect関数で、利用するコンポーネントのpropsに接続してアクセスする（getに相当）
• 更新したいイベントが発生するコンポーネントでupdateをコールする(要connect)

のような感じになるのではないでしょうか。

updateの部分で、ミドルウェアを利用することになります。

reduxのstoreは編集禁止で、基本的には常に新規オブジェクトを生成してstoreに代入（reducerでreturn）することになります。元のstoreの内容を、スプレッド演算子で複製し、該当部分だけ更新データに入れ替えるイメージです。

今回の件では、配列への追加になるので、

return [...data, ...(fetchデータ)]

のような感じになりそうですね。

スプレッド演算子 - Arrayリテラルで使う

各ミドルウェアについては、一度調べてみてください。
具体的な部分でわからないところがあれば、改めて質問されると良いと思います。

オススメはredux-sagaなのですが、一番ややこしいです笑

Comments

[退会済みユーザー]

回答ありがとうございます。コードでは伝わらなかった部分があったので、引き続き質問させていただきます。
ListManagerのようなクラスは大量にあります。それらはAbstract Factoryのような生成用関数にurlを渡すことによって生成されています。
それぞれのデータ構造(._dataなど)も異なっており、それらはそれぞれのクラスメソッドなどに依存しています。
アクセスは基本的にgetRequestObjectとupdateとgetのみによって行われる設計になっています。

私が考えたのは、インスタンスをそのままStoreのどこかにしまっておき、メソッドを実行するときはインスタンスごとコピーしてから実行、結果的に残ったものをstoreに書き戻す方法です。
このとき、
・Store内にクラスのインスタンスを入れておいてもいいのか？
・まるごとコピーする処理で問題はないのか？
が聞きたかったことです。

[Meganezaru]

なるほど、背景は何となく理解できたように思います。
動的でカスタマイズ可能なインターフェースのようなものを検討されているんですかね？

そのような実装は経験がないので、あくまで推測の域を超えないですが・・・

タイマーのようなもので自己更新するようなオブジェクトでなければ、そのまま入れておいても、１オブジェクトとして扱われるだけなので、問題ないと思います。

Reduxのルールとして、stateの変更は、常に新しいオブジェクトで上書きする（この仕組みで、新旧比較をおこなっているんだと思われます）ことになっているので、
更新する際は、新規のインスタンスを毎回作ることになると思います。
・現インスタンスから、各プロパティをコピーした新しいインスタンスを作成
・新インスタンスでupdate（非同期ミドルウェアでの処理が必要）
・新インスタンスをreturn

ただし、この場合、updateの結果にかかわらず、コンポーネントの再描画はかかることになると思います。

[退会済みユーザー]

よくわかりました。ありがとうございます。