mapStateToProps 대신 useselector/useDispatch를 사용해야 합니까?
때 후크를 useSelector훅 호출 규칙을 준수해야 합니다(기능 컴포넌트의 최상위 레벨에서만 호출합니다).「 」를 하고 mapStateToProps소품 안에 있는 상태도 문제없이 사용할 수 있습니다.<고객명>님도 useDispatch
하는 것 외에 ?mapStateToProps
Redux 스토어 상태는 콜백을 포함한 컴포넌트 내의 임의의 장소에서 읽고 변경할 수 있습니다.저장 상태가 변경될 때마다 구성 요소가 다시 렌더링됩니다.컴포넌트가 재렌더되면 useSelector를 다시 실행하여 나중에 원하는 장소에서 사용할 수 있도록 업데이트된 데이터를 제공합니다..useDispatch「」(「」):
function Modal({ children }) {
const isOpen = useSelector(state => state.isOpen);
const dispatch = useDispatch();
function handleModalToggeled() {
// using updated data from store state in a callback
if(isOpen) {
// writing to state, leading to a rerender
dispatch({type: "CLOSE_MODAL"});
return;
}
// writing to state, leading to a rerender
dispatch({type: "OPEN_MODAL"});
}
// using updated data from store state in render
return (isOpen ? (
<div>
{children}
<button onClick={handleModalToggeled}>close modal</button>
</div>
) : (
<button onClick={handleModalToggeled}>open modal</button>
);
);
}
mapStateToProps/mapDispatchToProps에서는 useSelector 및 useDispatch 후크에서는 할 수 없는 일이 없습니다.
이와 같이 두 가지 방법 사이에는 고려할 가치가 있는 몇 가지 차이점이 있습니다.
- 커커 decou decou: decou decou
mapStateToProps로직은로직( 렌더링입니다.useSelector는 연결된 컴포넌트에 대한 새롭고 다른 사고방식을 나타내며 컴포넌트 간의 디커플링이 더욱 중요하며 컴포넌트는 스스로 억제된다고 주장합니다.어떤 게 더 나아요?평결: 확실한 승자, 출처 없음 - (Developer Experience):
connect함수는 컴포넌트에 서 '컨테이너 컴포넌트'를 합니다. 기서 、 컨컨성성성성성useSelector는 매우 디스패치 후크를 사용합니다.DX를 사용하다 - propots" " child" : Selector에 소품에 "Stale propots" 및 "Zombie child" : 셀렉터 사용품에면면면면면면면면면면면?
useSelector최신 업데이트 소품이 들어오기 전에 실행할 수 있습니다. 수 케이스이지만, 은 이미 엣지 되었습니다.connect버전입니다.평결: 연결은 후크 소스보다 약간 안정적입니다. - 퍼포먼스 를 지원하는.즉, 퍼포먼스 최적화는 다음과 같습니다.
connect에는 결합 소품 및 연결 기능에 숨겨져 있는 기타 옵션을 사용하는 고급 기술이 있습니다.useSelector둘 다 .평결: 둘 다 고도의 상황에서의 퍼포먼스에 매우 적합합니다. - " " 와 함께 사용: " " " "
connect★★★★★ 컴포넌트(Props, Props, Dispatch 에 대해 3개의 쓰고 있는 자신을 하고 있습니다.Own Props, State Props, Dispatch Props)는 3가지로 구성되어 있습니다.레독스 훅은 비교적 간단한 방법으로 타입을 서포트합니다.판결: 타입은 훅을 사용하여 작업하기 매우 쉽습니다. - React의 미래:후크는 반응의 미래입니다.이상한 주장처럼 들릴 수 있지만, 에코시스템으로의 변화는 "동시 모드"와 "서버 컴포넌트"를 통해 코앞에 다가오고 있습니다.클래스 컴포넌트는 향후 React 버전에서도 지원되지만 새로운 기능은 훅에만 의존할 수 있습니다.물론 이 변경은 React-Redux와 같은 에코 시스템의 서드파티 라이브러리에도 영향을 미칩니다.후크는 미래의 증거입니다.
TL;DR - 최 t: 각 t t t t t t t t t t t t t t t t t t t t t t t t. connect보다 성숙하고, 이상한 버그나 엣지 케이스가 발생할 가능성이 적어, 문제를 보다 잘 분리할 수 있습니다.후크는 사용하는 장소 근처에 배치되어 있기 때문에 읽고 쓰기가 용이합니다(모든 것이 하나의 컴포넌트로 되어 있습니다).TypeScript 또 와와와와와와와와와 。마지막으로 향후 리액트 버전을 위해 쉽게 업그레이드할 수 있습니다.
'무엇인지 계신 것 네, 이렇게요. 컴포넌트 내에서는 기능 컴포넌트 내에서는useSelector()루프, 조건 및 중첩된 함수에는 배치할 수 없습니다..
// bad
const MyComponent = () => {
if (condition) {
// can't do this
const data = useSelector(mySelector);
console.log(data);
}
return null;
}
---
// good
const MyComponent = () => {
const data = useSelector(mySelector);
if (condition) {
console.log(data); // using data in condition
}
return null;
}
★★★★★★★★★★★★★★★★.mapStateToPtops보다 더 .
훅의 규칙 때문에 특정 훅을 사용하는 것이 매우 어렵습니다.콜백 내의 스테이트로부터 변경되는 값에 액세스 할 필요가 있습니다.
공평하게 하기 위해 콜백 내에서 변화하는 값에 액세스할 필요가 거의 없습니다.난 그게 언제 필요했는지 기억이 안 나.통상 콜백에 최신 상태가 필요한 경우 액션을 디스패치하는 것이 좋습니다.그 후, 그 액션의 핸들러(redux-thunk, redux-saga, redux-observatible 등)가 최신 상태에 액세스 합니다.
이것은 일반적인 훅(useSelector 뿐만이 아니라)의 특정 사항일 뿐이며, 예를 들어 실제로 원하는 경우 여러 가지 방법을 사용할 수 있습니다.
const MyComponent = () => {
const data = useSelector(mySelector);
const latestData = useRef()
latestData.current = data
return (
<button
onClick={() => {
setTimeout(() => {
console.log(latestData.current) // always refers to latest data
}, 5000)
}}
/>
)
}
mapStateToProps에 비해 코드 행을 저장하는 것 외에 후크를 사용하는 이점은 무엇입니까?
- 스토어에 접속할 필요가 있을 때는 접속 기능을 쓰지 않고, 스토어에 접속할 필요가 없어졌을 때는 삭제함으로써 시간을 절약할 수 있습니다.react devtools에 끝없는 래퍼가 없음
- 커넥트로부터의 소품, 부모로부터의 소품, 서드파티 라이브러리의 포장지를 삽입한 소품 사이에 명확한 구별이 있어 경합이 없습니다.
- 여러분같이 개발자)이할 수 .
mapStateToProps쭉 을 해야 요.mapStateToProps어떤 셀렉터가 이 특정 소품에 사용되는지 알아보려면 이 파일을 참조하십시오.와 셀렉터가 가 있는 되어 있는 . - 훅을 사용하면 훅의 일반적인 이점을 얻을 수 있습니다.그 중 가장 큰 장점은 여러 컴포넌트에서 관련된 스테이트풀 로직을 재사용할 수 있다는 것입니다.
- ★★★★★★★★★★★★★★★★
mapStateToProps.mapDispatchToPropsbindActionCreators bindActionCreators?바인드ActionCreators?바인드ActionCreators?바인드ActionCreators?바인드ActionCreators?)를 선택합니다.mapDispatchToProps수 .는 액션 크리에이터에서 때문입니다.이것은, 에서 오버라이드 되었기 때문입니다.mapDispatchToprops여러 구성요소에서 하나의 작업 작성자를 사용한 후 해당 작업 작성자의 이름을 바꾸면 이러한 구성요소는 계속 소품에서 가져온 오래된 이름을 사용합니다. 변수 깨집니다.
.
import { getUsers } from 'actions/user'
class MyComponent extends Component {
render() {
// shadowed variable getUsers, now you either rename it
// or call it like this.props.getUsers
// or change import to asterisk, and neither option is good
const { getUsers } = this.props
// ...
}
}
const mapDispatchToProps = {
getUsers,
}
export default connect(null, mapDispatchToProps)(MyComponent)
최종 답변은 마지막에 있는 EDIT 2를 참조해 주세요.
아무도 대답하는 방법을 모르기 때문에 컴포넌트의 루트 레벨 이외의 장소에서 정보가 필요할 때는 uselector를 사용하지 않는 것이 가장 좋은 답인 것 같습니다.앞으로 컴포넌트가 바뀔지 모르기 때문에 uselector는 전혀 사용하지 마십시오.
만약 이것보다 더 좋은 답을 가진 사람이 있다면, 나는 인정된 답을 바꿀 것이다.
편집: 몇 가지 답변이 추가되었습니다만, uselector를 전혀 사용하지 않는 이유를 강조했을 뿐입니다.후크 규칙이 변경되는 날까지, 콜백에서도 사용할 수 있습니다.단, 콜백에 사용하지 않는 경우에는 좋은 솔루션이 될 수 있습니다.
EDIT 2: 제가 원하는 모든 것의 예를 포함한 답변이 추가되어 있습니다.useSelector ★★★★★★★★★★★★★★★★★」useDispatch사용하기 쉬워요.
가 redex에서 되었습니다.useSelector훅은 다른 곳에서도 똑같이 돌릴 수 있다mapStateToProps 다른.하다유일한 제약사항은 선언 중에 후크 규칙을 따라야 한다는 것입니다.
기능 컴포넌트 내에서만 선언해야 합니다.
선언 중에는 조건 블록 안에 들어갈 수 없습니다.아래 샘플 코드
function test(displayText) { return (<div>{displayText}</div>); } export function App(props) { const displayReady = useSelector(state => { return state.readyFlag; }); const displayText = useSelector(state => { return state.displayText; }); if(displayReady) { return (<div> Outer {test(displayText)} </div>); } else { return null; } }
편집: OP가 콜백에서 사용하는 것에 관한 특정 질문을 했기 때문에 특정 코드를 추가하고 싶습니다.요약하면 콜백에서 useSelector 훅 출력을 사용할 수 없게 된 것은 없습니다.아래의 샘플 코드를 참조해 주세요.이것은 이 특정의 사용 사례를 나타내는 제 코드의 일부입니다.
export default function CustomPaginationActionsTable(props) {
//Read state with useSelector.
const searchCriteria = useSelector(state => {
return state && state.selectedFacets;
});
//use the read state in a callback invoked from useEffect hook.
useEffect( ()=>{
const postParams = constructParticipantListQueryParams(searchCriteria);
const options = {
headers: {
'Content-Type': 'application/json'
},
validateStatus: () => true
};
var request = axios.post(PORTAL_SEARCH_LIST_ALL_PARTICIPANTS_URI, postParams, options)
.then(function(response)
{
if(response.status === HTTP_STATUS_CODE_SUCCESS) {
console.log('Accessing useSelector hook output in axios callback. Printing it '+JSON.stringify(searchCriteria));
}
})
.catch(function(error) {
});
}, []);
}
의 경우 에서 할 수 .useSelector「」의 , 「」로부터의 값을 사용할 수 있습니다.useState.
const ExampleComponent = () => {
// use hook to get data from redux state.
const stateData = useSelector(state => state.data);
// use hook to get dispatch for redux store.
// this allows actions to be dispatched.
const dispatch = useDispatch();
// Create a non-memoized callback function using stateData.
// This function is recreated every rerender, a change in
// state.data in the redux store will cause a rerender.
const callbackWithoutMemo = (event) => {
// use state values.
if (stateData.condition) {
doSomething();
}
else {
doSomethingElse();
}
// dispatch some action to the store
// can pass data if needed.
dispatch(someActionCreator());
};
// Create a memoized callback function using stateData.
// This function is recreated whenever a value in the
// dependency array changes (reference comparison).
const callbackWithMemo = useCallback((event) => {
// use state values.
if (stateData.condition) {
doSomething();
}
else {
doSomethingElse();
}
// dispatch some action to the store
// can pass data if needed.
dispatch(someActionCreator());
}, [stateData, doSomething, doSomethingElse]);
// Use the callbacks.
return (
<>
<div onClick={callbackWithoutMemo}>
Click me
</div>
<div onClick={callbackWithMemo}>
Click me
</div>
</>
)
};
후크 규칙에 따르면 컴포넌트의 루트에서 사용해야 합니다.즉, 어디서든 사용할 수 없습니다.
Max가 답변에서 언급했듯이, 훅 문 자체는 동적/조건적이어서는 안 된다는 것을 의미합니다.훅 순서(훅: 「」(React 「」):useState )는에 의해 되어 있는 를 각하기 위해 사용됩니다.
후크의 값은 원하는 위치에 사용할 수 있습니다.
이것이 당신의 질문에 대한 완전한 답변에 근접할지는 의문이지만, 콜백이 계속 올라오고 있으며 예는 게시되지 않았습니다.
, 이 of of of of of of of of can 、 can 、 can 、 can 、 can 、 can 、 can 、 can 、 can 、 can 、 can 、 can 。 만약 당신이 자연과 분리되기를 원한다면mapDispatchToProps훅의 심플함과 개발 경험을 유지하면서:
https://gist.github.com/ErAz7/1bffea05743440d6d7559afc9ed12ddc
에 대해 언급하지 않는 이유mapStatesToProps라는 것이다.useSelector이다, 저장논리적이다.mapStatesToProps 때문에 이 점에서는 mapStatesToProps물론, 이 기능을 사용하는 것은 아닙니다.useSelector대신 스토어 파일(예: 리듀서 파일)에 래퍼를 만들고 거기서 다음과 같이 Import합니다.
// e.g. userReducer.js
export const useUserProfile = () => useSelector(state => state.user.profile)
언급URL : https://stackoverflow.com/questions/59748180/should-i-use-useselector-usedispatch-instead-of-mapstatetoprops
'programing' 카테고리의 다른 글
| mongodb를 사용하여 부모 객체의 배열에 포함된 객체의 속성을 업데이트하려면 어떻게 해야 합니까? (0) | 2023.03.22 |
|---|---|
| .NET Core: API JSON 응답에서 null 필드를 삭제합니다. (0) | 2023.03.22 |
| ORA-01882: 시간대 영역을 찾을 수 없습니다. (0) | 2023.03.22 |
| 메모장++에서 JSON을 포맷하는 방법 (0) | 2023.03.22 |
| 스프링 부팅을 통한 휴지 상태 서버 - 구성 (0) | 2023.03.22 |