Help us understand the problem. What is going on with this article?

React/Reduxのフォルダ管理「re-ducks」を導入する with TypeScript, redux-observable

More than 1 year has passed since last update.

React/Reduxのプロジェクトで、いろいろリファクタしたと思っており、re-ducksなるものを知った。この、「React/Reduxで秩序あるコードを書く」というかなりの良記事(良スライド)で紹介されている。他にこれとかも参考にした。

公式公式のmedium記事も参考になる。

とりあえずGitHubにサンプルを置いておいた

GitHubにサンプルを置いてある。基本的にはそれを参考にしていただければと思うが、以下、すごく適当に解説する。すごく適当に。

まずフォルダを作成

viewとstateに完全に分離させるため、statesフォルダとviewsフォルダを作り、viewsフォルダの中にcontainersとcomponentsフォルダを入れます。また、App関連のファイルもviews内に移動します。store.tsはstate管理に関するため、statesフォルダ内に格納します。

index.tsxだけはviewともstateとも直接的に関わるため、src直下に置きます。

re-ducks管理を始める

states以下にducksフォルダを作成し、その配下にre-ducks管理するファイル群を入れていく。

ducks配下のindex.tsは、ducksでexportされた各reducerをまとめる役割を持つ。これをstoreに繋げることで、reducerとstoreが繋がる。

re-ducks固有のOperationsとSelectors

re-ducksには、ducksにもなかった要素が2つ出てきます。「Operations」と「Selectors」です。

Operationsとは

「Operations」は、actionをviewから完全に分離させるためのものです。例えば、従来であればcontainerにて、以下のように直接actionを呼び出していたと思います。

src/containers/Comments.tsx
const mapDispatchToProps = (dispatch: Dispatch<Action<any>>) => {
  return {
    fetchData: (url: string) => dispatch(commentsActions.fetch.started({ url }))
  }
};

しかしOperationsを作成することで、containerがactionの実装を知る必要がなくなります。

src/views/containers/Comments.tsx
const mapDispatchToProps = (dispatch: Dispatch<Action<any>>) => {
  return {
    fetchData: (url: string) => commentsOperations.fetch(url)
  }
};

Selectorsとは

「Selectors」は、storeに格納されているstateを、componentで必要されている状態に整形する作業を担います。stateに対して行うタスクをSelectorsに任せることで、containerではstateをSelectorsに渡すだけでよくなり、viewとstateが明確に分離されます。さらにreselectというライブラリを使用することで、stateのうち関係する部分に更新があった場合にのみ計算処理を行ってstateを更新することができ、無関係なstateの更新によって計算処理が実行されてしまうのを防ぎます。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away