플럭스 대신 Redux를 사용하면 어떤 단점이 있을 수 있습니까?
최근에 레독스를 발견했어요다 좋아보여요.플럭스보다 Redx를 사용할 때 단점, 단점 또는 단점이 있습니까?감사해요.
여기 레독스 작성자!
이 기능을 사용하여 다음과 같은 타협을 합니다.
돌연변이를 피하는 법을 배워야 할 거야플럭스는 데이터 변이에 대해 의견이 없지만 Redux는 돌연변이를 좋아하지 않으며 Redux를 보완하는 많은 패키지는 사용자가 상태를 변이시키지 않는다고 가정합니다.redex-imputable-state-invariant와 같은 개발 전용 패키지로 이를 적용하거나, Unmutable.js를 사용하거나, 자신과 팀이 변이 없는 코드를 작성할 수 있도록 신뢰할 수 있지만, 이는 사용자가 인식할 필요가 있는 사항이며, 팀이 의식적으로 결정할 필요가 있습니다.
당신은 당신의 짐을 신중하게 골라야 할 것입니다.Flux는 실행 취소/삭제, 지속성 또는 형태와 같은 "근접적인" 문제를 해결하려고 하지 않지만, Redux는 미들웨어나 스토어 확장자 등의 확장 포인트를 가지고 있어 젊고 풍부한 생태계를 만들어냈습니다.즉, 대부분의 패키지는 새로운 아이디어이며, 아직 많은 사용법을 받지 못했습니다.당신은 몇 달 후에 분명히 나쁜 생각이 될 무언가에 의존할 수도 있지만, 아직은 말하기 어렵다.
플로우 통합은 아직 원활하지 않습니다.현재 플럭스는 Redux가 아직 지원하지 않는 매우 인상적인 정적 유형 검사를 수행할 수 있습니다.도착하겠지만 시간이 좀 걸릴 거예요.
첫 번째가 초보자에게 가장 큰 장애물이 되고, 두 번째가 지나치게 열정적인 얼리어답터들에게 문제가 될 수 있고, 세 번째가 제 개인적인 불만이라고 생각합니다.그 외에는 Redux를 사용해도 Flux가 회피하는 단점은 없다고 생각합니다만, Flux에 비해 단점도 있다고 하는 사람도 있습니다.
Redux 사용의 단점에 대한 답변도 참조하십시오.
Redux와 Flux 모두 많은 일반적인 패턴, 특히 비동기 데이터 페치를 수반하는 패턴을 커버하기 위해 상당한 양의 보일러 플레이트 코드가 필요합니다.Redux 문서에는 이미 보일러 플레이트 절감의 몇 가지 예가 나와 있습니다.http://redux.js.org/docs/recipes/ReducingBoilerplate.htmlAlt 또는 Fluxor와 같은 Flux 라이브러리에서 필요한 모든 것을 얻을 수 있지만 Redux는 기능보다 자유를 선호합니다.일부 개발자에게는 단점이 될 수 있습니다. 왜냐하면 Redx는 사용자의 상태에 대해 의도하지 않게 무시될 수 있는 특정 가정을 하기 때문입니다.
당신이 정말로 당신의 질문에 대답할 수 있는 유일한 방법은 가능하면 개인 프로젝트에서 Redux를 시도해 보는 것입니다.Redux는 더 나은 개발자 경험에 대한 필요성 때문에 생겨났으며, 기능적 프로그래밍에 편향되어 있습니다.리듀서나 함수 구성 등의 기능 개념을 잘 모르면 속도가 느려질 수 있지만 약간만 느려질 수 있습니다.데이터 흐름에서 이러한 아이디어를 수용하면 테스트와 예측이 쉬워집니다.
면책사항:Flummox(인기 있는 Flux 구현)에서 Redux로 이행했는데, 단점보다 장점이 훨씬 많습니다.내 코드의 마법은 훨씬 덜하지더 적은 마법은 보일러 플레이트를 조금 더 비싸게 치뤄야 하지만, 그것은 매우 작은 대가이다.
플럭스와 리덕스...
Redux는 순수한 Flux 구현이 아니라 Flux에서 영감을 얻은 구현입니다.가장 큰 차이점은 응용 프로그램의 모든 상태를 포함하는 상태 개체를 래핑하는 단일 저장소를 사용한다는 것입니다.플럭스처럼 스토어를 작성하는 대신 단일 객체 상태를 변경하는 리듀서 함수를 작성합니다.이 개체는 앱의 모든 상태를 나타냅니다.Redx 에서는, 현재의 액션과 상태를 취득해, 새로운 상태를 반환합니다.그것은 행동은 순차적이고 상태는 불변함을 의미한다.그것은 (내 의견으로는) Redux에서 가장 명백한 사기극으로 이어진다.
Redux is supporting an 불변의 concept.
불변의 이유
여기에는 몇 가지 이유가 있습니다.
1. 일관성 - 스토어 상태는 항상 환원기에 의해 변경되므로 누가 무엇을 변경했는지 쉽게 추적할 수 있습니다.
2. 성능 - 무한하므로 Redux는 이전 상태 !==의 현재 상태와 렌더링 여부만 확인하면 됩니다.결정된 렌더링에 매번 상태를 루프할 필요가 없습니다.
3. 디버깅 - 시간여행 디버깅 및 핫 새로고침과 같은 새로운 개념입니다.
업데이트: 이것이 충분히 설득력이 없다면 Lee Byron이 불변의 사용자 인터페이스에 대해 훌륭하게 이야기하는 것을 보십시오.
Redux는 이 아이디어를 유지하기 위해 코드베이스/라이브러리를 통한 개발자 훈련이 필요합니다.라이브러리를 선택하고 코드를 변경할 수 없는 방식으로 작성해야 합니다.
Flux 개념의 다양한 구현(및 고객의 요구에 가장 적합한 것)에 대해 자세히 알아보려면 이 유용한 비교를 확인하십시오.
덧붙여서, JS의 장래의 개발은, Redux가 행해지고 있는 것은 인정합니다(이러한 라인을 작성하는 것에 관해서).
다른 Flux의 대안보다 Redux를 사용하는 가장 큰 이점 중 하나는 생각을 보다 기능적인 접근으로 바꿀 수 있다는 것입니다.모든 와이어가 어떻게 연결되어 있는지 이해하면 그 놀라운 우아함과 심플함을 실감할 수 있으며, 결코 되돌릴 수 없습니다.
저는 Redx를 사용하는 것을 선호합니다. Redx DevTools는 Flux에 비해 상태 관리가 훨씬 쉬워지고, 유용한 데이터로 상태를 확인할 수 있는 매우 유용한 도구이며, React 개발 도구와 인라인 방식으로 연결됩니다.
또한 Redux는 Angular와 같은 다른 인기 있는 프레임워크와 함께 사용할 수 있는 유연성을 갖추고 있습니다.어쨌든, Redux가 자신을 프레임워크라고 어떻게 소개하는지 봅시다.
Redux는 Redux를 매우 잘 도입할 수 있는 3원칙을 가지고 있으며 Redux와 Flux의 주요 차이점이기도 합니다.
단일 정보원
전체 응용 프로그램 상태는 단일 저장소 내의 개체 트리에 저장됩니다.
따라서 별도의 코딩 작업 없이 서버 상태를 시리얼화하고 클라이언트에 물을 주입할 수 있기 때문에 범용 앱을 쉽게 만들 수 있습니다.또한 단일 상태 트리를 통해 응용 프로그램을 쉽게 디버깅하거나 검사할 수 있습니다. 또한 개발 중인 응용 프로그램의 상태를 유지하여 개발 주기를 단축할 수 있습니다.Undo/Redo 등 기존에 구현하기 어려웠던 일부 기능은 모든 상태가 단일 트리에 저장되면 갑자기 구현하기가 쉽지 않을 수 있습니다.
console.log(store.getState())
/* Prints
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*/
상태는 읽기 전용입니다.
상태를 변경하는 유일한 방법은 무슨 일이 일어났는지 설명하는 객체인 액션을 내보내는 것입니다.
이것에 의해, 뷰도 네트워크 콜백도 스테이트에 직접 기입되지 않게 됩니다.대신, 그들은 국가를 변화시키려는 의도를 표현한다.모든 변화는 중앙집중화돼 엄정한 순서로 이뤄지기 때문에 주의해야 할 미묘한 인종조건은 없다.작업은 단순한 개체이므로 로깅, 직렬화, 저장 및 나중에 재생하여 디버깅 또는 테스트를 수행할 수 있습니다.
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
})
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})
순수한 기능으로 변경
작업에 의해 상태 트리가 변환되는 방법을 지정하려면 순수 감소기를 작성합니다.
환원기는 이전 상태와 조치를 취하고 다음 상태를 반환하는 순수한 함수입니다.이전 상태를 변환하는 대신 새 상태 개체를 반환해야 합니다.한 개의 리듀서로 시작하여 어플리케이션이 커짐에 따라 상태 트리의 특정 부분을 관리하는 작은 리듀서로 분할할 수 있습니다.리듀서는 단순한 함수이기 때문에 호출 순서를 제어하거나 추가 데이터를 전달하거나 페이지 매김과 같은 일반적인 작업에 재사용 가능한 리듀서를 만들 수 있습니다.
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)
자세한 내용은 여기를 참조해 주세요.
레독스는 불변과 관련된 규율을 필요로 한다.제가 추천할 수 있는 것은 우연한 상태 돌연변이에 대해 알려드리는 ng-freeze입니다.
제가 알기로는 리덕스는 플럭스에서 영감을 얻은 것으로 알고 있습니다. 플럭스는 MVC(모델 뷰 컨트롤러)와 같은 아키텍처입니다.Facebook은 MVC를 사용할 때 확장성 문제로 인해 플럭스를 도입하므로 플럭스는 구현이 아닌 개념일 뿐입니다.실제로 리덕스는 플럭스의 구현입니다.
언급URL : https://stackoverflow.com/questions/32021763/what-could-be-the-downsides-of-using-redux-instead-of-flux
'programing' 카테고리의 다른 글
| Angular 전체 목록JS 디렉티브? (0) | 2023.03.15 |
|---|---|
| $.getJ가 되는 이유SON은 소리 없이 실패합니까? (0) | 2023.03.15 |
| XMLHttpRequest에서 빈 응답 텍스트 (0) | 2023.03.15 |
| "문의 양식 7" 양식에 ID 추가 (0) | 2023.03.15 |
| Angular에서 분리된 스코프가 없는 명령에서 컨트롤러 함수를 호출합니다.JS (0) | 2023.03.15 |