답변:
Redux 작가는 여기!
나는 당신이 그것을 사용하여 다음과 같은 타협을 할 것이라고 말하고 싶습니다 :
돌연변이를 피하는 법을 배워야합니다. Flux는 데이터를 변경하는 것에 대해 의견이 불분명하지만 Redux는 돌연변이를 좋아하지 않으며 Redux를 보완하는 많은 패키지는 사용자가 상태를 변경하지 않는다고 가정합니다. redux-immutable-state-invariant 와 같은 dev-only 패키지로 이것을 시행 하거나 Immutable.js를 사용 하거나 비 돌연변이 코드를 작성하기 위해 자신과 팀을 신뢰 할 수 있지만 알아야 할 사항이며, 팀이 받아들이는 의식적인 결정이 되십시오.
패키지를 신중하게 선택해야합니다. Flux는 실행 취소 / 다시 실행 , 지속성 또는 양식 과 같은 "가까운"문제를 명시 적으로 해결하려고 시도하지 않지만 Redux에는 미들웨어 및 상점 확장기와 같은 확장 점이 있으며 젊지 만 풍부한 생태계 가 생겨났습니다 . 이것은 대부분의 패키지가 새로운 아이디어이며 아직 중요한 사용량을받지 못했다는 것을 의미합니다. 몇 달 후에 분명히 나쁜 생각이 될 수있는 것에 의존 할 수 있지만 아직 말하기는 어렵습니다.
아직 멋진 Flow 통합이 없습니다. Flux는 현재 Redux 가 아직 지원하지 않는 매우 인상적인 정적 유형 검사 를 수행 할 수있게합니다 . 우리는 거기에 갈 것이지만 시간이 좀 걸릴 것입니다.
첫 번째는 초보자에게는 가장 큰 장애물이고, 두 번째는 지나치게 열성적인 얼리 어답터에게는 문제가 될 수 있고, 세 번째는 내 개인적인 애완 동물입니다. 그 외에 Redux를 사용하면 Flux가 피할 수있는 특정 단점이 있다고 생각하지 않으며 일부 사람들은 Flux와 비교하여 약간의 단점이 있다고 말합니다.
Redux 사용 에 대한 나의 대답도 참조하십시오 .
shallowEqual검사에서 상태가 변경되었는지 확인하는 데 사용됩니다. 그러나 deepEqual 또는 JSON.stringify 및 compare로 바꿀 수 있습니다. 결국 성능이 다소 떨어지지 만 DOM을 다루지 않고 순수한 계산이 가능합니다. 그리고 어쨌든 렌더링 자체는 동일합니다
Redux와 Flux에는 많은 공통 패턴, 특히 비동기 데이터 가져 오기와 관련된 패턴을 처리하기 위해 상당한 양의 상용구 코드가 필요합니다. Redux 문서에는 이미 보일러 플레이트 감소에 대한 몇 가지 예가 있습니다 (http://redux.js.org/docs/recipes/ReducingBoilerplate.html) . Alt 또는 Fluxxor와 같은 Flux 라이브러리에서 필요한 모든 것을 얻을 수 있지만 Redux는 기능보다 자유를 선호합니다. Redux는 부주의하게 무시할 수있는 상태에 대한 특정 가정을하기 때문에 일부 개발자에게는 단점이 될 수 있습니다.
실제로 개인 프로젝트에서 가능하다면 Redux를 시도하는 것이 유일한 질문입니다. Redux는 더 나은 개발자 경험이 필요하기 때문에 시작되었으며 기능 프로그래밍에 편향되어 있습니다. 감속기 및 기능 구성과 같은 기능 개념에 익숙하지 않은 경우 속도가 약간 느려질 수 있습니다. 이러한 아이디어를 데이터 흐름에 수용 할 수있는 장점은 테스트와 예측이 더 쉽다는 것입니다.
면책 조항 : Flummox (일반적인 Flux 구현)에서 Redux로 마이그레이션했으며 그 단점은 단점보다 훨씬 큽니다. 내 코드에서 훨씬 적은 마법을 선호합니다. 약간의 보일러 플레이트를 사용하면 마법이 줄어들지 만 비용은 매우 적습니다.
Redux는 순수한 Flux 구현은 아니지만 Flux에서 영감을 얻은 것입니다. 가장 큰 차이점은 응용 프로그램의 모든 상태를 포함하는 상태 객체를 래핑하는 단일 저장소를 사용한다는 것입니다. Flux에서와 같이 상점을 만드는 대신 단일 객체 상태를 변경하는 감속기 함수를 작성합니다. 이 객체는 앱의 모든 상태를 나타냅니다. Redux에서는 현재 작업 및 상태를 얻고 새로운 상태를 반환합니다. 이는 작업이 순차적이며 상태가 변경 불가능하다는 것을 의미합니다. 그것은 Redux에서 가장 분명한 단점을 제시합니다 (제 의견으로는).
그 이유는 다음과 같습니다.
1. 일관성 -매장의 상태는 항상 감속기에 의해 변경되므로 누가 무엇을 변경하는지 쉽게 추적 할 수 있습니다.
2. 성능 -변경 불가능하므로 Redux는 이전 상태! == 현재 상태 및 렌더링 여부 만 확인하면됩니다. 결정된 렌더링에 매번 상태를 반복 할 필요가 없습니다.
3. 디버깅 – Time Travel Debugging 및 Hot Reloading 과 같은 새로운 멋진 개념 .
업데이트 : 그것이 충분히 설득되지 않았다면 Lee Byron이 불변의 사용자 인터페이스 에 대한 훌륭한 이야기를보십시오 .
Redux는이 아이디어를 유지하기 위해 코드베이스 / 라이브러리를 통한 개발자 규율이 필요합니다. 라이브러리를 선택하고 변경 불가능한 방식으로 코드를 작성해야합니다.
Flux 개념의 다양한 구현 (및 요구 사항에 가장 적합한 것)에 대해 자세히 알아 보려면 이 유용한 비교를 확인하십시오 .
그 후, Redux가 JS의 미래 개발이 진행될 곳임을 인정해야합니다 (이 라인을 작성하는 것과 같이).
Redux 는 Flux 와 비교할 때 상태 관리가 훨씬 쉬워지는 하나의 저장소를 사용하기 때문에 Redux 를 사용하는 것을 선호합니다 . 또한 Redux DevTools 는 유용한 데이터를 사용하여 상태에서 수행중인 작업을 볼 수 있고 React 개발 도구와 실제로 인라인을 제공하는 유용한 도구입니다.
또한 Redux 는 Angular 와 같은 널리 사용되는 다른 프레임 워크와 함께 사용하여 유연성을 향상 시켰 습니다 . 어쨌든, Redux가 어떻게 프레임 워크로 자신을 소개하는지 봅시다.
Redux에는 Redux를 매우 잘 도입 할 수있는 세 가지 원칙 이 있으며 Redux와 Flux의 주요 차이점이기도합니다.
진실의 단일 소스
전체 애플리케이션의 상태는 단일 저장소 내의 오브젝트 트리에 저장됩니다.
이를 통해 별도의 코딩 작업없이 서버의 상태를 클라이언트에 직렬화하고 수화 할 수 있으므로 범용 앱을 쉽게 만들 수 있습니다. 단일 상태 트리를 사용하면 응용 프로그램을보다 쉽게 디버깅하거나 검사 할 수 있습니다. 또한 개발주기를 단축하기 위해 개발시 앱의 상태를 유지할 수 있습니다. 예를 들어 실행 취소 / 다시 실행과 같이 전통적으로 구현하기 어려운 일부 기능은 모든 상태가 단일 트리에 저장된 경우 갑자기 구현하기가 쉽지 않을 수 있습니다.
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)