リダックスは死んだのか？私が SaaS アプリから Redux を排除した理由

?接続: https://www.subham.online

?Twitter: https://twitter.com/TheSubhamMaity

---

数か月前、私は思い切って、しばらく取り組んできた SaaS アプリの一部をリファクタリングしました。そこには Redux があり、グローバル状態を管理する役割を果たしていました。しかし、何か違和感を感じました。コードベースが大きくなり、Redux が重く感じ始めました。何ヶ月も触っていなかったものをバックパックに入れて持ち歩くときなどはどうでしょうか？そんな感じでした
しかし、アプリが成長するにつれて、複雑さも増してきました。 Redux は解決策というよりはむしろ問題のように感じられるようになりました。私たちは実際のロジックより定型的なものを書いていました。

? Redux のジレンマ

ある日、Redux 関連の別のバグと格闘しているときに、React Query に出会いました。いくつか調べた結果、React Query に出会いました。これについてはよく噂を聞いていましたが、Redux を完全に置き換えることができるとは思いもしませんでした。そこで、試してみました。

前 (Redux 使用):

// Action
const fetchUserData = (userId) => async (dispatch) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const response = await api.fetchUser(userId);
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', error });
  }
};

// Reducer
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

// Component
const UserProfile = ({ userId, fetchUserData, userData, loading, error }) => {
  useEffect(() => {
    fetchUserData(userId);
  }, [userId]);

  if (loading) return <spinner></spinner>;
  if (error) return <error message="{error.message}"></error>;
  return <userinfo user="{userData}"></userinfo>;
};

const mapStateToProps = (state) => ({
  userData: state.user.data,
  loading: state.user.loading,
  error: state.user.error,
});

export default connect(mapStateToProps, { fetchUserData })(UserProfile);

後 (React Query を使用):

const useUserData = (userId) => {
  return useQuery(['user', userId], () => api.fetchUser(userId));
};

const UserProfile = ({ userId }) => {
  const { data, isLoading, error } = useUserData(userId);

  if (isLoading) return <spinner></spinner>;
  if (error) return <error message="{error.message}"></error>;
  return <userinfo user="{data}"></userinfo>;
};

export default UserProfile;

手動でデータをフェッチし、リデューサーを作成し、アクションをディスパッチしてからストアを更新する代わりに、React Query がその重労働のほとんどを私たちのために行ってくれました。これにいくつかの巧妙に作成されたカスタム フックを組み合わせると、無駄のない平均的な状態管理マシンが完成しました。

?しかし、待ってください、Redux はすべて悪いものなのでしょうか?

さて、誤解しないでください。 Redux はブギーマンではありません。これは、適切な場所を持った強力なツールです。多くの無関係なコンポーネント間で共有する必要がある複雑なクライアント側の状態を含むアプリを構築している場合、深くネストされた状態を使用している場合、またはアプリのフローをより明示的に制御する必要がある場合。 % のケース、特にサーバー状態の処理には、React Query カスタム フックで十分です。

では、なぜ大騒ぎするのでしょうか?開発者として、私たちは、より優れたツールがあるにもかかわらず、使い慣れたものを使用するという罠に陥ることがあります。それが私と Redux で起こったことです。私は古いやり方に囚われており、大規模なアプリの状態を管理するには Redux が唯一の方法だと考えていました。つまり、インターネット全体が「Redux かバストか!」と言っていたのです。そうですよね?

?どんでん返し

これがキッカーです。Redux を削除することで、実際にアプリのスケーラビリティがさらに向上しました。直感に反しますよね？しかし、考えてみてください。React Query がサーバーの状態を処理し、カスタム フックがローカルの状態を管理することで、懸念事項が明確に分離されました。アプリの各部分はよりモジュール化され、推論が容易になりました。

?リダックスは死んだのか？

正直に言うと、ここ数か月間、React Query が私のニーズを満たさないケースはほとんどありませんでした。

では、Redux は死んだのでしょうか?そうではないかもしれないが、かつてのようなオールスターではないことは確かだ。最新の React アプリでサーバー状態を処理するため

それで、これで終わりです。 Redux 中毒から React Query の啓発までの私たちの旅。それは必ずしも簡単なことではありませんでした。疑問が生じたり、深夜のデバッグ セッションが必要になったり、何度もフェイスパームをすることもありました。しかし、最終的にはそれだけの価値がありました。

自分のアプリで Redux に行き詰まっていると感じている場合は、一歩下がって自問することをお勧めします。「本当に必要ですか?」あなたはその答えに驚かれるかもしれません。

少ない方が良い場合もあります。特に状態管理に関してはそうです。すみません、削除するリデューサーがまだいくつかあります。コーディングを楽しんでください!

以上がリダックスは死んだのか？私が SaaS アプリから Redux を排除した理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。