위챗 애플릿에서 Redux 사용하기

mp-redux :
Miniprogram bindings for Redux 
작은 프로그램 개발도 때때로 복잡한 업무 장면을 만나게 된다. 예를 들어 크로스 페이지의 데이터 전달, 비부자 구성 요소의 데이터 동기화, 여러 자손 구성 요소의 데이터 복용 등이다. 이때 글로벌 데이터나 trigger Event/select Component는 지원을 잘 제공하지 못한다. 반면에 업무 논리 코드와 템플릿 코드는 읽기와 유지보수가 어려울 정도로 빠르게 팽창할 수 있다.추적하기 어려운 버그 위험도 발생하기 쉽다. 
redux는react 프로젝트에 널리 응용되고 있는 상태 관리 방안으로서 이러한 문제를 해결하는 데 도움을 줄 수 있습니다.이것이 바로 mp-redux의 출처입니다. 추가 이해나 학습 비용을 낮추기 위해 사용 방식과 API는react-redux와 가능한 한 일치합니다.
Github Repo: github.com/acurseJ/mp-…
사용 1.redux를 도입합니다. 비동기적이거나 다른side effect를 처리해야 한다면,thunk,saga 또는 그 어떠한 중간부품을 인용할 수 있습니다. 이전에redux를 사용한 웹 프로젝트와 다를 것이 없습니다.
첨부: redux repo github.com/reduxjs/red…
2. mp-redux dist 디렉토리에 있는 mp-redux.js 파일을 복사하면 mp-redux는 세 개의 API를 제공합니다.
Provider
Application Store 도입

// app.js
import { createStore } from './lib/redux'
import rootReducer from './reducer/index'
import getInitialState from './getInitialState'
import { Provider } from './lib/mp-redux'

App(
 Provider(createStore(rootReducer, getInitialState()))({
         // ...app config
    })
)

connect
바인딩 애플릿 페이지

import { add } from './actions'
import { connect } from '../lib/mp-redux'

const mapStateToProps = state => ({
 num: state.num
})

const mapDispatchToProps = {
 add
}

Page(
 connect(mapStateToProps,mapDispatchToProps)({
   // ...page config
   customClick() {
       this.add(1)
      }
   })
)

connectComponent
귀속 애플릿 사용자 정의 구성 요소, 사용법은connect와 비슷합니다. 귀속 페이지에 사용되고, 귀속 구성 요소에 사용됩니다.

import { minus } from './actions'
import { connectComponent } from '../../lib/mp-redux'

const mapStateToProps = state => ({
 num: state.num
})

const mapDispatchToProps = {
 minus
}

Component(
 connectComponent(mapStateToProps,mapDispatchToProps)({
   // ...component config
   methods: {
     customClick() {
       this.minus(2)
       }
     }
  })
)

사용자 정의 감청 watch
react를 사용하는 프로젝트에 대해 우리는 렌더링 함수에서 구성 요소가 수신한 props, 예를 들어 텍스트 변환, 데이터 포맷 등을 자체적으로 처리할 수 있다. 그러나 작은 프로그램에서 논리층과 시각층이 분리되고 클래스 컴퓨터의 계산 속성 API를 제공하지 않기 때문에 setData 이전에 사용자 정의 처리가 변경된 데이터를 처리하는 것은 의심할 여지없이 번거로운 일이다. mp-redux는watch를 제공했다.state 지정 필드의 변경을 감청하고 setData 권한을 개발자에게 돌려주는 데 도움을 줄 수 있습니다.

const mapStateToProps = state => ({
 num: state.num
})

Component(
 connectComponent(mapStateToProps)({
   // ...component config
     watch: {
         num(newVal, oldVal){  //  maped state    ， num           ，          
            this.setData({    //   ，  setData       ，              
                num: newVal * 10
              })
           }
        }
    })
)

링크 주소
프로젝트 주소: mp-redux
애플릿 샘플 코드: mp-redux demo
전재 대상:https://juejin.im/post/5be7e107e51d45092866e5bc