WeChat 애플릿의 Redux 바인딩 분석

이 글에서는 주로 WeChat 애플릿의 Redux 바인딩 인스턴스에 대한 자세한 설명에 대한 관련 정보를 소개합니다. 필요한 친구는

WeChat 애플릿의 Redux 바인딩 인스턴스에 대한 자세한 설명

을 참조하세요.

코드 라이브러리를 로컬로 복제하거나 다운로드하세요:

git clone https://github.com/charleyw/wechat-weapp-redux

dist/wechat-weapp-redux.js (또는 minify 복사) 파일을 미니 프로그램 프로젝트에 직접 복사하세요. 예를 들어 아래에서 우리가 libs 디렉토리에 모든 타사 패키지 설치):

cd wechat-weapp-redux
 cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

위 명령은 패키지를 미니 프로그램의 libs 디렉토리에 복사합니다.

사용

1. Redux Store를 앱에 바인딩 .

const store = createStore(reducer) // redux store
 
 const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
 const {Provider} = WeAppRedux;

공급자는 Redux 스토어를 앱에 바인딩하는 데 사용됩니다.

App(Provider(store)({
 onLaunch: function () {
  console.log("onLaunch")
 }
}))

provider의 구현은 단순히 전역 개체 앱에 저장소를 추가하여 페이지에서 getApp을 사용하여 제거할 수 있도록 하는 것입니다.

위 코드는 다음과 같습니다.

App({
 onLaunch: function() {
   console.log( "onLaunch" )
  },
  store: store
})

2. 페이지 정의에서 연결을 사용하여 redux 저장소를 페이지에 바인딩합니다.

const pageConfig = {
  data: {
  },
  ...
 }

페이지 정의

const mapStateToData = state => ({
  todos: state.todos,
  visibilityFilter: state.visibilityFilter
 })

페이지에 매핑할 상태 정의

const mapDispatchToPage = dispatch => ({
  setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
  toggleTodo: id => dispatch(toggleTodo(id)),
  addTodo: text => dispatch(addTodo(text)),
 })

페이지에 매핑할 방법 정의

const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)

connect 사용 위의 내용을 변환하려면 pageConfig에 정의가 추가됩니다.

Page(nextPageConfig);

미니 프로그램을 등록하는 페이지

3. Description

위 두 단계를 모두 마치면 this.data에서 mapStateToData에 정의한 데이터에 접근할 수 있습니다.

mapDispatchToPage에 의해 정의된 작업이 이 개체에 매핑됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat Mini 프로그램의 UI 및 컨테이너 구성 요소 소개

WeChat Mini 프로그램의 MD5 방식 분석 정보

WeChat Mini 프로그램의 새로운 드래그 구성 요소 이동 보기 사용소개

위 내용은 WeChat 애플릿의 Redux 바인딩 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!