react 에서 vuex 의 예제 코드 를 사용 합 니 다.

머리말
필 자 는 최근 에 react 를 사용 하 는 것 을 배우 고 있 는데 react 를 언급 하면 redux 를 돌아 갈 수 없다.redux 는 상태 관리 구조 로 react 프로젝트 에 널리 사용 되 지만 redux 는 react 를 위해 태 어 난 것 이 아니 라 react-redux 가 다 리 를 만들어 야 합 니 다.이 동시에 redux 구조 규정 은 동기 action 만 보 낼 수 있 고 비동기 action 을 보 내 려 면 redux-thunk,redux-saga 등 중간 부품 을 결합 해 야 하기 때문에 redux 를 해결 하 는 것 은 정말 쉽 지 않다.명사 만 이렇게 많다.필 자 는 예전 에 vuex 와 접촉 한 적 이 있다.vuex 는 필자 와 같은 요리 닭 에 대해 상대 적 으로 우호 적 이지 만 vuex 는 vue 와 세트 로 되 어 있어 react 에 사용 할 수 없다.평생 동안 react 에 사용 할 생각 을 하지 마라.그러나 저 는 불복 합 니 다.그러면 이 글 은 react 에서 사용 할 수 있 는 vuex 와 유사 한 상태 관리 도 구 를 어떻게 만 드 는 지 탐색 해 보 겠 습 니 다.저 는 이 를reux라 고 지 었 습 니 다.
vuex <=> redux + react-redux + redux-saga
본문
응답 식 데이터 관측 시스템
vue 의 가장 큰 특징 은 응답 식 데이터 관측 시스템 입 니 다.get 데 이 터 를 수집 할 때 의존 을 수집 하고 set 데이터 에서 업 데 이 트 를 촉발 할 수 있 습 니 다.vuex 는 vue 의 데이터 관측 시스템 을 빌려 데이터 의존 도 를 쉽게 수집 할 수 있 고 구성 요소 의 입도 까지 정교 하 게 의존 할 수 있다.즉,특정한 상태 가 바 뀌 었 을 때 이 상태 에 의존 하 는 구성 요소 만 rerender 를 촉발 할 수 있다.이렇게 보면 redux 시스템 은 비교적 멍청 하 다.action 을 제출 하면루트 구성 요소 rerender(react-redux 내부 에서 자동 으로 shouldCompoentUpdate 판단).

위의 그림 은 vue 홈 페이지 에서 vuex 구조 에 대한 설명링크에서 나 왔 다.
위의 그림 에서 component 는 vue component 입 니 다.vue component 가 render 를 실행 하면 vuex 의 데이터 응답 시스템 은 자동 으로 수집 하여 의존 할 수 있 습 니 다.상태 가 바 뀌 면 이 상태 에 의존 하 는 구성 요소 가 다시 렌 더 링 됩 니 다.우리 가 실현 하고 자 하 는 것 은 vuex 와 같은 상태 관리 도구 이다.즉,get 방식 으로 의존 을 수집 하고 set 방식 으로 업 데 이 트 를 촉발 하 는 것 을 지원 하기 때문에 reux 는 vue 의 응답 식 데이터 관측 시스템 을 이용 했다.이른바 선인 들 이 나 무 를 심 고 후세 사람들 이 더 위 를 식 히 는 것 이다.
어떻게 수집 의존
우 리 는 이미 응답 식 데이터 시스템 이 있 습 니 다.다음 에 해결 해 야 할 문 제 는 의존 도 를 어떻게 수집 하 느 냐 하 는 것 입 니 다.수집 의존 도 는 get 을 촉발 해 야 합 니 다.get 을 촉발 하 는 전 제 는 구성 요소 가 store 를 가 져 올 수 있 기 때문에 첫 번 째 단 계 는 구성 요소 에 store 를 주입 하 는 것 입 니 다.react-redux 와 유사 합 니 다.reux 는 하위 구성 요 소 를 store 로 가 져 갈 수 있 도록 Provider 를 제공 합 니 다.

class Provider extends Component {
 getChildContext() {
  return {store: this.props.store};
 }

 render() {
  const { children } = this.props;
  return children;
 }
}
Provider.childContextTypes = {
 store: PropTypes.object
};

해당 하위 구성 요 소 는 context 에서 store 를 받 을 수 있 습 니 다.다음 과 같 습 니 다.

class Child extends Component {
 render() {
  // store => this.context.store
 }
}
Child.contextTypes = {
 store: PropTypes.object
};

이렇게 쓰 는 단점 은 분명 합 니 다.모든 하위 구성 요 소 는 contextTypes 를 정의 해 야 합 니 다.같은 react-redux,reux 는 connect 함 수 를 제공 하여 state=>props 를 매 핑 하 는 데 사 용 됩 니 다.

const connect = (mapStateToProps = () => {}) => {
 return (WrappedComponent) => {
  const Wrapper = class extends Component {
   render() {
    const store = this.context.store;
    const props = Object.assign({}, this.props, mapStateToProps(store.state, this.props), {dispatch: store.dispatch, commit: store.commit});
    return <WrappedComponent {...props} />
   }
  }
  Wrapper.contextTypes = {
   store: PropTypes.object
  };
  reaturn Wrapper;
 }
}

이렇게 되면 구성 요소 가 render 방법 을 실행 하면 get 갈 고 리 를 터치 하여 store 가 자동 으로 의존 을 수집 할 수 있 습 니 다.의존 이 무엇 인지 다시 생각해 보 겠 습 니 다.사실은 구성 요소 인 스 턴 스 에 의존 해 야 합 니 다.그러면 set 갈고리 가 실 행 될 때 모든 의존(즉 구성 요소 인 스 턴 스)은 forceUpdate 방법 을 실행 하면 rerender 의 효 과 를 얻 을 수 있 습 니 다.
문 제 는 get 갈고리 가 촉발 되 었 을 때 의존 이 누구 인지 어떻게 확인 하 느 냐 하 는 것 이다.vue 를 참고 하여 우 리 는 stack 을 정의 합 니 다.componentWillMount 에 들 어 갈 때 스 택 에 들 어가 고 componentDid Mount 에 들 어 갈 때 스 택 을 나 갑 니 다.

componentWillMount() {
 pushTarget(this);
}

componentDidMount() {
 popTarget(this);
}

이렇게 get 갈고리 가 실 행 될 때 현재 target 은 목표 의존 입 니 다.또한 구성 요소 update 시 의존 도 를 다시 수집 해 야 합 니 다.update 이후 의존 관계 가 바 뀌 었 을 가능성 이 높 기 때 문 입 니 다.

update() {
 //     
 this.clear();
 pushTarget(this);
 this.forceUpdate(() => {
  popTarget(this);
 })
}

이로써 우리 의 작은 목 표 는 이미 완성 되 었 습 니 다.react 에서 vuex 를 사용 하 는 것 은 더 이상 꿈 이 아 닙 니 다!
주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.