Adakah Redux Mati? Sebab Saya Tendang Redux Keluar dari Apl SaaS Kami

?Sambung: https://www.subham.online

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

---

Beberapa bulan yang lalu, saya telah mencuba dan memfaktorkan semula bahagian apl SaaS yang telah saya kerjakan sebentar tadi. Kami mempunyai Redux di sana, melakukan tugasnya, menguruskan keadaan global. Tetapi sesuatu terasa tidak menyenangkan — pangkalan kod semakin besar, dan Redux mula berasa... berat. Anda tahu, seperti semasa anda membawa barang-barang dalam beg galas anda yang tidak pernah anda sentuh selama berbulan-bulan? Begitulah rasanya.
Tetapi apabila apl kami berkembang, begitu juga dengan kerumitan. Redux mula berasa kurang seperti penyelesaian dan lebih seperti masalah. Kami menulis lebih banyak boilerplate daripada logik sebenar.

? Dilema Redux

Pada suatu hari, semasa melawan satu lagi pepijat berkaitan Redux, saya terjumpa React Query. Selepas beberapa penyelidikan, saya terjumpa React Query. Saya telah mendengar banyak buzz di sekelilingnya, tetapi saya tidak pernah menyangka ia boleh menggantikan Redux sepenuhnya. Kemudian saya mencubanya.

Sebelumnya (dengan 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);

Selepas (dengan 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;

Daripada mengambil data secara manual, menulis pengurang, menghantar tindakan dan kemudian mengemas kini kedai, React Query melakukan kebanyakan tugas berat itu untuk kami. Padankan itu dengan beberapa cangkuk tersuai yang direka dengan baik dan kami mempunyai mesin pengurusan negeri yang ramping.

? Tetapi Tunggu, Adakah Redux Semua Buruk?

Sekarang, jangan salah faham. Redux bukan boogeyman. Ia adalah alat yang berkuasa yang mempunyai tempatnya. Jika anda sedang membina apl dengan keadaan sisi klien yang kompleks yang perlu dikongsi merentas banyak komponen yang tidak berkaitan, Jika anda bekerja dengan keadaan bersarang dalam atau jika anda memerlukan kawalan yang lebih jelas ke atas aliran apl anda tetapi selama 90 % daripada kes, terutamanya untuk mengendalikan keadaan pelayan, cangkuk tersuai React Query adalah lebih daripada mencukupi.

Jadi, kenapa kecoh? Kadangkala, sebagai pembangun, kita terjebak dalam penggunaan perkara yang biasa, walaupun terdapat alat yang lebih baik di luar sana. Itulah yang berlaku dengan saya dan Redux. Saya terperangkap dengan cara lama saya, memikirkan Redux adalah satu-satunya cara untuk mengurus keadaan dalam apl yang lebih besar. Maksud saya, seluruh internet berkata "Redux atau bust!" betul tak?

? Plot Twist

Inilah penyepaknya: dengan mengalih keluar Redux, kami sebenarnya menjadikan apl kami LEBIH berskala. Kontra-intuitif, bukan? Tetapi fikirkan - dengan React Query mengendalikan keadaan pelayan kami dan cangkuk tersuai menguruskan keadaan setempat, kami mempunyai pemisahan kebimbangan yang jelas. Setiap bahagian apl kami menjadi lebih modular dan lebih mudah untuk difikirkan.

? Adakah Redux sudah mati?

Sejujurnya, dalam beberapa bulan kebelakangan ini, saya telah melihat sangat sedikit kes di mana React Query tidak memenuhi keperluan saya.

Jadi, adakah Redux sudah mati? Mungkin tidak, tetapi ia pastinya bukan yang terbaik dahulu. Untuk mengendalikan keadaan pelayan dalam apl React moden

Jadi, begitulah. Perjalanan kami dari ketagihan Redux kepada pencerahan React Query. Ia tidak selalu mudah – terdapat saat-saat keraguan, sesi nyahpepijat lewat malam dan lebih daripada beberapa tapak tangan. Tetapi akhirnya, ia berbaloi.

Jika anda berasa terganggu oleh Redux dalam apl anda sendiri, saya menggalakkan anda untuk berundur selangkah dan bertanya kepada diri anda: adakah anda benar-benar memerlukannya? Anda mungkin terkejut dengan jawapannya.

kadang-kadang kurang lebih. Lebih-lebih lagi dalam hal pengurusan negeri. Sekarang jika anda boleh maafkan saya, saya mempunyai beberapa lagi pengurang untuk dipadamkan. Selamat mengekod!

Atas ialah kandungan terperinci Adakah Redux Mati? Sebab Saya Tendang Redux Keluar dari Apl SaaS Kami. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!