リダックスは死んだのか？私が SaaS アプリから Redux を排除した理由-jsチュートリアル-php.cn

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

DDD

リリース： 2024-10-16 06:21:31

オリジナル

591 人が閲覧しました

Is Redux Dead? Why I Kicked Redux Out of Our SaaS App

?接続: 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 />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={userData} />;
};

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 />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={data} />;
};

export default UserProfile;

ログイン後にコピー

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

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

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

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

?どんでん返し

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