반응, redux 및 반응-redux의 관계는 무엇입니까?

이 글의 내용은 React, Redux, React-Redux? , 특정 참조 가치가 있으므로 도움이 필요한 친구가 참조할 수 있으므로 도움이 되기를 바랍니다.

React

일부 소규모 프로젝트의 경우 데이터 관리에 Props와 State만 사용해도 충분합니다. 그럼 언제 Redux를 도입해야 할까요? 컴포넌트를 렌더링하기 위한 데이터를 props를 통해 상위 컴포넌트에서 얻을 경우 보통 A --> B 이지만, 비즈니스 복잡도가 증가함에 따라 A --> B -- > C -- 처럼 될 수도 있습니다. > D --> E, E에 필요한 데이터는 A에서 props를 통해 전달되어야 하며 해당 E --> A는 콜백을 역으로 전달합니다. 구성 요소 BCD에는 이러한 데이터가 필요하지 않지만 이를 통과해야 합니다. 이는 실제로 약간 불쾌하며 전달된 props와 콜백도 BCD 구성 요소의 재사용에 영향을 미칩니다. 또는 형제 구성 요소가 특정 데이터를 공유하려는 경우 이를 전송하거나 얻는 것이 그리 편리하지 않습니다. 이런 상황에서는 Redux를 도입할 필요가 있습니다.

사실 A --> B --> C --> D --> E 이 경우 React는 레이어별로 props를 전달하지 않고 데이터를 가져올 수 있습니다. 나중에 논의할 React-redux는 Context를 사용하여 각 하위 구성 요소가 저장소의 데이터를 가져올 수 있도록 합니다.

Redux

사실, 우리는 공유 데이터를 저장할 장소를 찾고 싶을 뿐입니다. 누구나 그것을 얻고 수정할 수 있습니다. 그게 전부입니다. 모든 변수를 하나로 묶어도 괜찮나요? 예, 물론 작동합니다. 하지만 전역 변수이고 누구나 액세스하고 수정할 수 있기 때문에 친구가 실수로 덮어쓸 수 있기 때문에 너무 우아하지 않고 안전하지 않습니다. 전역 변수가 작동하지 않으면 전용 변수를 사용하세요. 전용 변수는 쉽게 수정할 수 없습니다. 바로 클로저를 생각하시나요...

이제 다음을 만족하는 함수를 작성해야 합니다.

데이터 객체 저장
외부 세계에서 이 데이터에 액세스한 후
외부에서도 이 데이터를 수정할 수 있습니다
데이터가 변경되면 구독자에게 알리세요

function createStore(reducer, initialState) {
 // currentState就是那个数据
 let currentState = initialState;
 let listener = () => {};
 
 function getState() {
 return currentState;
 }
 function dispatch(action) {
 currentState = reducer(currentState, action); // 更新数据
 listener(); // 执行订阅函数
 return action;
 }
 function subscribe(newListener) {
 listener = newListener;
 // 取消订阅函数
 return function unsubscribe() {
  listener = () => {};
 };
 }
 return {
 getState,
 dispatch,
 subscribe
 };
}
 
const store = createStore(reducer);
store.getState(); // 获取数据
store.dispatch({type: 'ADD_TODO'}); // 更新数据
store.subscribe(() => {/* update UI */}); // 注册订阅函数

데이터 업데이트 단계:

무엇: 무엇을 하시겠습니까--- 파견( action)
방법: 어떻게 하는지, 결과 --- Reducer(oldState, action) => newState
Then?: 구독 기능을 다시 실행(예: UI 다시 렌더링 등)
이런 식으로 , 저장소를 구현하고 외부 접근을 위한 데이터 저장 센터를 제공하는 등이 Redux의 주요 아이디어입니다. 따라서 Redux는 React와 본질적인 관계가 없습니다. Redux는 다른 라이브러리와 함께 정상적으로 사용할 수 있습니다. 단지 Redux의 데이터 관리 방식이 React의 데이터 중심 뷰 개념과 매우 일치하기 때문입니다. 이 둘의 조합은 개발을 매우 편리하게 만듭니다.

이제 데이터에 접근할 수 있는 안전한 장소가 생겼으니 어떻게 이를 React에 통합할 수 있을까요? 애플리케이션이 초기화될 때 window.store = createStore(reducer)를 생성한 다음, 필요한 경우 store.getState()를 통해 데이터를 얻고, store.dispatch를 통해 데이터를 업데이트하고, store.subscribe를 통해 데이터 변경 사항을 구독할 수 있습니다. setState 수행... 여러 곳에서 이 작업을 수행하면 정말 부담스러울 것이며 여전히 전역 변수의 우아함을 피할 수 없습니다.

React-Redux

전역 변수에는 많은 단점이 있으므로 아이디어를 변경하여 각 하위 구성 요소가 최상위 Prop에 액세스할 수 있는 한 Store를 React 애플리케이션의 최상위 Prop에 직접 통합해 보겠습니다. , 다음과 같이 괜찮을 것입니다:

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

React는 이러한 후크, 컨텍스트를 제공하며 사용법은 매우 간단합니다. 이해하려면 공식 데모를 살펴보십시오. 이제 각 하위 구성요소가 스토어에 쉽게 접근할 수 있게 되었으니, 다음 단계는 하위 구성요소가 스토어에서 사용하는 데이터를 꺼내어 수정하고, UI 업데이트 등을 구독하는 것입니다. 각 하위 구성요소는 이 작업을 다시 수행해야 합니다. 분명히 더 편리한 방법, 즉 고차 구성요소가 있어야 합니다. 상위 구성 요소를 통해 store.getState(), store.dispatch 및 store.subscribe를 캡슐화하면 하위 구성 요소는 일반적으로 props를 사용하여 데이터를 얻고 콜백을 트리거하는 콜백을 사용합니다. 매장이 없습니다.

다음은 이 고차 구성 요소의 대략적인 구현입니다.

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 组件加载完成后订阅store变化，如果store有变化则更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 组件销毁后，取消订阅事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
   {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}
使用connect的时候，我们知道要写一些样板化的代码，比如mapStateToProps、mapDispatchToProps这两个函数：


const mapStateToProps = state => {
 return {
 count: state.count
 };
};
 
const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Child);
 
// 上述代码执行之后，可以看到connect函数里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />
 
// 就变成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />

// 이런 식으로 하위 구성 요소의 props Child에는 count와 dispatch라는 두 가지 속성이 더 있습니다.

// count를 사용하여 UI와 디스패치를 ​​사용하여 콜백을 실행할 수 있습니다

그래서 괜찮나요? 좋아요. 클로저를 통해 데이터 센터 저장소를 생성한 다음 이 저장소를 React의 최상위 props에 바인딩합니다. 하위 구성 요소는 HOC를 통해 최상위 props.store와 연결을 설정한 다음 데이터를 가져오고 데이터를 수정하며 UI를 업데이트합니다. 여기서는 주로 세 가지가 어떻게 연결되는지에 대해 설명합니다. redux 미들웨어, 감속기 분할, 연결의 기타 매개변수 등과 같은 고급 기능을 알고 싶다면 해당 소스 코드를 살펴보세요.

위 내용은 반응, redux 및 반응-redux의 관계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!