분류 Reactjs

React Hooks가 Redux를 대체합니까? (2)

컨텐츠 정보

  • 조회 444 (작성일 )

본문

TDDDay 앱의 또 다른 예는 다음과 같습니다.


import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { compose } from 'ramda';
import page from '../../hocs/page.js';
import Purchase from './purchase-component.js';
import { addHolder, removeHolder, getHolders } from './purchase-reducer.js';
const PurchasePage = () => {
// You can use these instead of
// mapStateToProps and mapDispatchToProps
const dispatch = useDispatch();
const holders = useSelector(getHolders);
const props = {
// Use function composition to compose action creators
// with dispatch. See "Composing Software" for details.
addHolder: compose(
dispatch,
addHolder
),
removeHolder: compose(
dispatch,
removeHolder
),
holders,
};
return <Purchase {...props} />;
};
// `page` is a Higher Order Component composed of many
// other higher order components using function composition.
export default page(PurchasePage);


이 구성 요소는 DOM을 처리하지 않습니다. 프리젠 테이션 구성 요소입니다. React-Redux 후크 API를 사용하여 Redux에 연결합니다.


UI의 다른 부분에서이 양식이 관심을 갖는 데이터가 필요하기 때문에 Redux를 사용합니다. 구매 흐름이 끝나면 데이터를 데이터베이스에 저장해야 합니다.


관심 있는 상태는 단일 구성 요소로 현지화 되지 않은 구성 요소 간에 공유되며 임시가 아닌 지속되며 여러 페이지 보기 또는 세션에 걸쳐있을 수 있습니다. React API 위에 자체 상태 컨테이너 라이브러리를 빌드 하지 않으면 로컬 구성 요소 상태가 도움이 되지 않는 모든 것이 있으며 이는 Redux를 사용하는 것보다 훨씬 복잡합니다.


앞으로 React의 서스펜스 API는 상태 저장 및로드에 도움이 될 수 있습니다. Suuxense API가 착륙하여 Redux의 저축 /로드 패턴을 대체 할 수 있는지 확인해야 합니다. Redux를 사용하면 I / O 서비스를 조롱하지 않고도 부작용을 나머지 구성 요소 로직과 완전히 분리 할 수 ​​있습니다. (효과의 격리는 썽크보다 redux-saga를 선호하는 이유입니다). Redux의 이 사용 사례와 경쟁하기 위해서는 React의 API가 효과 격리를 제공해야 합니다.


Redux는 아키텍처입니다 


Redux는 상태 관리 라이브러리보다 훨씬 많으며 종종 적습니다. 또한 기본적으로 Flux Architecture의 하위 집합이므로 상태 변경 방법에 대해 더 많은 의견을 가지고 있습니다. Redux 아키텍처에 대해 자세히 설명하는 다른 블로그 게시물이 있습니다.


복잡한 구성 요소 상태가 필요할 때 Redux 스타일 감속기를 자주 사용하지만 Redux 라이브러리는 필요하지 않습니다. 또한 Redux 라이브러리를 가져 오지 않고도 Redux 스타일 작업 (및 Autodux 및 redux-saga와 같은 Redux 도구)을 사용하여 노드 앱에서 작업을 디스패치 할 수 있습니다.


Redux는 항상 라이브러리보다 더 많은 아키텍처와 적용되지 않는 규칙이었습니다. 실제로, Redux의 필수 구현은 수십 줄의 코드로 재현 될 수 있습니다.


모든 것을 리 덕싱하는 대신 hooks API로 더 많은 로컬 컴포넌트 상태를 사용하려면 좋은 소식입니다.


React는 Redux 스타일 감속기와 인터페이스 할 useReducer 후크를 제공합니다. 사소한 상태 논리, 종속 상태 등에 유용합니다. 단일 구성 요소에 임시 상태를 포함 할 수 있다고 생각되는 사용 사례가 있는 경우 Redux 아키텍처를 사용할 수 있지만 Redux를 사용하는 대신 useReducer 후크를 사용하여 상태를 관리하십시오.


나중에 상태를 유지하거나 공유해야 하는 경우 이미 90% 완료된 것입니다. 남은 것은 컴포넌트를 연결하고 리듀서를 Redux 스토어에 추가하는 것입니다. 


더 많은 Q & A 


"모든 것이 Redux에 없으면 결정론이 깨 집니까?" 


실제로 Redux는 결정론을 강요하지 않습니다. 컨벤션은 않습니다. Redux 상태를 결정론적으로 사용하려면 순수한 함수를 사용하십시오. 임시 구성 요소 상태를 결정적으로 유지하려면 순수한 함수를 사용하십시오.


"단일 진실의 근원으로서 Redux가 필요하지 않습니까?" 


단일 진리 원칙에 따르면 모든 state가 단일 출처에서 나올 필요가 있다고 말하지는 않습니다. 대신, 그것은 각 state에 대해 그 state에 대한 단일 진실의 근원이 있어야 함을 의미합니다. 당신은 여러 가지 다른 상태의 조각을 가질 수 있으며, 각각의 고유 한 출처를 가지고 있습니다.


즉, Redux로 들어가는 것과 구성 요소 상태로 들어가는 것을 선택할 수 있습니다. 현재 위치 href에 대한 브라우저 API와 같은 다른 소스에서 상태를 가져올 수도 있습니다.


Redux는 애플리케이션 상태에 대한 단일 소스를 유지하는 가장 좋은 방법이지만, 구성 요소 상태가 단일 컴포넌트로 현지화 되어 정의에 의해 한 곳에서만 사용되는 경우 이미 해당 상태에 대한 단일 소스를 가지고 있습니다. React 구성 요소 상태.


Redux 상태로 무언가를 넣으면 항상 Redux 상태에서 읽어야 합니다. Redux의 모든 주에서 Redux는 해당 state에 대한 귀하의 단일 진실 소스가 되어야 합니다.


필요한 경우 Redux에 모든 것을 넣는 것이 좋습니다. 자주 업데이트 해야 하는 상태 또는 종속 상태가 많은 구성 요소에 성능 영향이 있을 수 있습니다. 성능이 문제가 되지 않는 한 성능에 대해 걱정할 필요는 없지만 두 가지 방법을 모두 사용해보고 성능에 영향을 미치는지 확인하십시오. RAIL 성능 모델을 프로파일링하고 기억하십시오.


"React-redux connect 또는 hooks API를 사용해야 합니까?" 


조건에 따라서. connects는 재사용 가능한 고차 컴포넌트를 생성하는 반면 hooks API는 단일 컴포넌트와의 통합에 최적화되어 있습니다. 동일한 상점 소품을 다른 구성 요소에 연결해야 합니까? connect로 이동하십시오. 그렇지 않으면 후크 API가 읽는 방법을 선호합니다. 예를 들어, 사용자 조치에 대한 권한 권한을 처리하는 구성 요소가 있다고 가정하십시오.


import { connect } from 'react-redux';
import RequiresPermission from './requires-permission-component';
import { userHasPermission } from '../../features/user-profile/user-profile-reducer';
import curry from 'lodash/fp/curry';

const requiresPermission = curry(
(NotPermittedComponent, { permission }, PermittedComponent) => {
const mapStateToProps = state => ({
NotPermittedComponent,
PermittedComponent,
isPermitted: userHasPermission(state, permission),
});

return connect(mapStateToProps)(RequiresPermission);
},
);

export default requiresPermission; 


이제 관리자 권한이 필요한 여러 가지 관리자 보기가 있는 경우 다른 모든 교차 문제와 함께 이 권한 요구 사항을 구성하는 상위 구성 요소를 만들 수 있습니다.


import NextError from 'next/error';
import compose from 'lodash/fp/compose';
import React from 'react';
import requiresPermission from '../requires-permission';
import withFeatures from '../with-features';
import withAuth from '../with-auth';
import withEnv from '../with-env';
import withLoader from '../with-loader';
import withLayout from '../with-layout';

export default compose(
withEnv,
withAuth,
withLoader,
withLayout(),
withFeatures,
requiresPermission(() => <NextError statusCode={404} />, {
permission: 'admin',
}),
); 


그것을 사용하려면 :


import compose from 'lodash/fp/compose';
import adminPage from '../HOCs/admin-page';
import AdminIndex from '../features/admin-index/admin-index-component.js';

export default adminPage(AdminIndex); 


고차 컴포넌트 API는 이 사용 사례에 편리하며 실제로 후크 API보다 간결합니다 (코드가 덜 필요함). 연결 API를 읽으려면 mapStateToProps를 첫 번째로 사용해야 한다는 점을 기억해야 합니다. 인수 및 mapDispatchToProps를 두 번째 인수로 사용하면 함수 또는 객체 리터럴을 사용할 수 있으며 이러한 동작의 차이점을 알아야 합니다. 또한 카레는 되었지만 자동 카레는 아니라는 점을 기억해야 합니다.


다시 말해, connect API가 간결한 코드로 작업을 수행하지만 특히 읽기 어렵거나 인체 공학적이지는 않습니다. 다른 구성 요소에 대한 연결을 재사용 할 필요가 없다면 약간 더 타이핑 해야 하더라도 훨씬 더 읽기 쉬운 후크 API를 선호합니다.


"단일 패턴이 안티 패턴이고 Redux가 싱글 톤 인 경우, Redux는 안티 패턴이 아닙니까?" 


아니요. 싱글 톤은 코드 변경 냄새이며 공유 가능한 변경 가능 상태를 나타낼 수 있으며 이는 실제 안티 패턴입니다. Redux는 캡슐화를 통해 공유 변경 가능 상태를 방지합니다 (리듀서 외부에서 직접 앱 상태를 변경하지 말고 대신 Redux가 상태 업데이트를 처리 함) 및 메시지 전달 (전달 된 작업 객체 만 상태 업데이트를 트리거 할 수 있음)


다음 단계 


EricElliottJS.com에서 React 및 Redux에 대해 자세히 알아보십시오. 이 기사의 코드 예제에서 사용 된 함수 구성 및 부분 적용과 같은 기능 패턴은 많은 예제와 비디오 연습을 통해 심도 있게 논의됩니다.