Immutable.js에 대한 자세한 설명

이번에는 Immutable.js에 대한 자세한 설명을 가져왔습니다. Immutable.js 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

React + Router + Redux 프로젝트에서 Immutable.js 적용

Immutable을 먼저 소개합니다.

Immutable.js의 출현은 함수형 프로그래밍 아이디어에서 비롯되었습니다. 직접 수정했습니다. 관련 소개는 공식 웹사이트를 참조하세요:
https://facebook.github.io/immutable-js/

그래서 프로그래밍 경험이 있다면 Immutable이 또 다른 데이터 구조 라이브러리라는 것을 이해할 수 있습니다. 이는 ArrayList에서 LinkedList로 변경하는 것과 같습니다. Immutable.js에서는 JavaScript 구문 자체 배열([])과 객체({ })가 Immutable.List 및 Immutable.Map으로 변경됩니다.

하지만 결국 ArrayList와 LinkedList는 모두 List를 상속하고 인터페이스도 상대적으로 일관적이므로 교체해도 큰 문제는 아니지만 Immutable을 사용하여 JavaScript 네이티브를 교체하려는 경우에는 조금 더 필요합니다. 복잡한.

var map1 = Immutable.Map({a:1, b:2, c:3});var map2 = map1.set('b', 50);
map1.get('b'); // 2/* ----------------悠长悠长的分割线---------------- */var list1 = Immutable.List.of(1, 2);var list2 = list1.push(3, 4, 5);var list3 = list2.unshift(0);var list4 = list1.concat(list2, list3);

복잡하지만 조금만 더 집중하세요.

그럼 redux와 라우터에 대해 이야기해보겠습니다

Redux에는 Reducer를 분할할 수 있는 CombineReducers 메서드가 있습니다. 예를 들면 다음과 같습니다.

combineReducers({  user: userReducer,
  dashboard: dashboardReducer,
})

그런 다음 질문이 옵니다.
상태를 가져올 때 state.get('user')를 사용합니까, 아니면 state.user를 사용합니까?

분명히 state.user를 사용하세요. CombineReducers는 Immutable을 모르기 때문입니다.
(섞으라고 하지 마세요. 단층 구조도 그럴 수 있는데 다층이면 어떨까요? 여러 사람이 함께 하는 협업은 어떨까요? 한 곳에서 헷갈리면 여기저기서 오류가 발생합니다)

그래서 React + Router + Redux 프로젝트에서 Immutable을 사용하려면 로컬에서 사용하거나(로컬에서 사용하면 기본적으로 매우 악몽이 될 것입니다) 전체 세트를 사용하십시오.
그럼 여기를 보세요(이 사람은 CombineReducers를 다시 작성했습니다):
https://github.com/gajus/redux-immutable

combinReducers를 사용하면 state.get('user')을 안전하게 사용할 수 있습니다.

combineReducers를 해결하는 동안, 그들은 또한 React-router-redux의 문제도 해결했습니다(라우터가 상태에서 라우팅 모듈로 사용되지만 Immutable을 사용하는 방법을 모른다고 상상해 보세요):

https://github.com / gajus/redux-immutable#using-with-react-router-redux

말씀드렸지만 어떻게 사용하는지

우선 프로젝트는 React + Router + Redux로 표준입니다.
그럼 Immutable을 소개해야 합니다.

그러면 이렇게 해야 합니다:

redux-immutable을 소개합니다

redux-immutable의 README.md에 따라 기록을 구성합니다(Ctrl+C, Ctrl+V)

모든 감속기를 병합할 때 redux-immutable로 전환하세요 CombineReducers

상태에 들어오고 나가는 모든 데이터는 Immutable.js의 Immutable.List 및 Immutable.Map을 사용합니다(이것이 실제 주제입니다)

그밖에 주의해야 할 사항이 있나요?

컴포넌트 관련 문제:

redux에서 나온 아이디어는 컴포넌트를 Smart와 Dumb으로 나누는 것입니다. Smart 컴포넌트는 데이터 수신을 담당하고, Dumb 컴포넌트는 데이터 사용과 props에만 집중하는 역할을 담당합니다. 그렇다면 Immutable은 Smart와 Dumb을 포괄합니까?

내 개인적인 의견은 다음과 같습니다.
멍청한 구성 요소는 기본적으로 여러 프로젝트에서 추상화하고 공유해야 합니다. 이러한 구성 요소가 Immutable을 지원하지 않으면 더 좋을 것입니다. 그렇지 않으면 Immutable에 연결됩니다.

그렇다면 Dumb의 데이터는 JavaScript에 기반을 두고 있는데, 이는 우리가 Immutable의 이점을 누릴 수 없다는 뜻이 아닐까요?
컴포넌트에 데이터가 복사되었으니 호환성을 위해 이것만 조금 희생해도 문제 없겠죠?

이 아이디어의 결론은 다음과 같습니다.
redux 개념의 컨테이너는 State와 Prop, Prop과 Dispatch 간 연결 시 Immutable과 Native 간의 상호 변환도 수행합니다. (어댑터 패턴)

테스트할 때:

현재 데이터를 console.log에 기록하고 싶을 것입니다. Immutable.List를 입력하는 것은 매우 피곤해 보입니다. console.log(imtb.toJS())

를 사용하는 것이 좋습니다. 디버깅할 때?

주제에서 벗어남

이러한 기능이 JavaScript 자체에 내장되어 있으면 좋을 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

Android 개발에서 js와 ​​상호 작용하는 방법

JS 모듈화-RequireJS

Vue.js 2.0 이상으로 만든 그래파이트 문서 스타일 서식 있는 텍스트 편집기

상세한 node.js의 경로 모듈에 대한 설명

위 내용은 Immutable.js에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!