この処理はReducerでやるのがベストですか？

Question

実環境を説明すると手間がかかるので、
Todoリストを想像してみます。

Todoリスト自体にtodoを加えたり削除したりする方法はもちろんわかります。
では例えば、複数のtodoを「コピー」したいと考えます。コピー＆ペースト的なものを自前で実装する場合です。
（実際にTodoリストでコピー＆ペーストを実装するようなことはなさそうかもしれないですが、例として考えてください）

const initialState = {
  todos: [],
  clipboard: [],
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            completed: false,
            text: action.payload.text,
          },
        ],
      };
    case 'COPY':
      const clipboard = state.todos.slice(
        action.payload.start,
        action.payload.end
      );
      return {
        ...state,
        clipboard,
      };
    default:
      return state;
  }
};

このように、同じreducer内での違うプロパティに依存したコードを書くことになります。
こういった形で実装自体はできるのですが、あまりこういったコードはみないような気がします。
問題なければこのままやりたいと思っているのですが、この実装をすることによるデメリット、および他の実装方法があるようであれば教えてください。

初歩的な質問かもしれないのですが、よろしくお願いします。

Answer 1

こんにちは。
React & Redux でそれなりの規模(reducerの数でいうと約20個）のSPA開発に従事してきました。

こういった形で実装自体はできるのですが、あまりこういったコードはみないような気がします。

はい。
reducer の各 case ごとのロジックについて、「これでよいのか？」と考えあぐねるお気持ちは自分も経験ありなので分かります。

React と Redux というフレームワークに乗っかれば、これらがかなりのことをやってくれますが、各reducerごとのstateオブジェクトの構造は開発者が自由に設計、実装したり、もしくは便利なモジュール（例えば、Immutable.js など）を使ったりもできるので、必然的に各アクションごとの case で次のstateを作ってreturnするコードは、お手本のないコードを書くことになりますよね。（ここで、お手本のないコードとは、分かりやすく言い換えると、「ググればどこかに自分の求めているコードがきっと見つかる、という類のものではない」ぐらいの意味です。）

React と Redux を使えば、状態の管理と状態変更によるDOMの更新はこれらのフレームワークに頼れるので、そのアプリ固有の提供したいサービスや問題解決のドメインを色濃く反映した state の設計と実装に頭を使う時間を割くことができる、とも言えます。

上記は、体験に基づく私個人の認識であることをご了解いただいた上で、ご質問に挙げられているコードを拝読しましても第一印象としては

「まあ確かに、そういうことをやりたいなら、こういうコードになるよね。」

という感じです。細かいところを言えば、

「state の clipboard は配列ではなく、todos の開始インデクスと終了インデクスを持っていればいいので、

const initialState = {
  todos: [],
  clipboard: { 
   startIndex: -1, 
   endIndex: -1, 
  },
};

でもよいのでは？ 」といった細かいツッコミを言えなくもないですが、これはご質問の本質的な回答にはならないでしょう。

stateの設計や実装および、各caseごとのロジックについて、開発者一人の判断で進めると心もとないという場合は、やはりコードレビューを行って、他の開発者の目に晒して改良案を求めて議論するのがよいと思います。

以上、参考になれば幸いです。

Comments

[atemu]

ありがとうございます！！
大変参考になりました。
本質的な内容を見極めてくださっていて本当に助かりました。その通りですね。

（一応、実際の環境のコードではないので伝えきれていなかったのですが、この例だと、todoが仮に削除されたとしても、clipboard内にはデータを保持しておきたいと思っていたので、このようなデータ構造にしていました。）

丁寧なご回答ありがとうございました！