Redux는 죽었는가? 내가 SaaS 앱에서 Redux를 제거한 이유

?연결: https://www.subham.online

?트위터: 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 쿼리 포함):

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를 제거하여 실제로 앱의 확장성을 더욱 높였다는 것입니다. 반직관적이죠? 하지만 생각해 보세요. 서버 상태를 처리하는 React Query와 로컬 상태를 관리하는 사용자 지정 후크를 통해 우리는 우려 사항을 명확하게 분리했습니다. 앱의 각 부분이 더욱 모듈화되고 추론하기 쉬워졌습니다.

? Redux는 죽었는가?

솔직히 지난 몇 달 동안 React Query가 내 요구 사항을 충족하지 못하는 경우를 거의 본 적이 없습니다.

그럼 Redux는 죽었나요? 아닐 수도 있지만 확실히 예전의 올스타는 아닙니다. 최신 React 앱에서 서버 상태를 처리하기 위해

자, 여기까지입니다. Redux 중독에서 React Query 깨달음까지의 여정. 항상 쉬운 일은 아니었습니다. 의심의 순간도 있었고, 늦은 밤 디버깅 세션도 있었고, 몇 차례 뺨을 맞대기도 했습니다. 하지만 결과적으로는 그럴만한 가치가 있었습니다.

자신의 앱에서 Redux로 인해 어려움을 겪고 있다면 한 걸음 물러나 스스로에게 물어보시기 바랍니다. Redux가 정말 필요한가요? 답변을 보시면 놀라실 수도 있습니다.

때로는 적은 것이 더 좋습니다. 특히 국가 관리에 있어서는 더욱 그렇습니다. 이제 실례지만 삭제할 리듀서가 몇 개 더 있습니다. 즐거운 코딩하세요!

위 내용은 Redux는 죽었는가? 내가 SaaS 앱에서 Redux를 제거한 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!