ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

const { combineReducers } = require('redux');
const testItem = require('./testItem/index');
const testItem2 = require('./testItem2/index');
定数user = require('./user/index');

定数リデューサー = 結合リデューサー({
 テスト項目: テスト項目.テスト項目、
 テスト項目2、
 ユーザー
});

モジュール.エクスポート = {
 減速機
}

const { createStore、applyMiddleware } = require('redux');
const { リデューサー } = require('./reducers');
const { logger } = require('redux-logger');

const ストア = createStore(
 減速機、
 ミドルウェアを適用(ロガー)
）

モジュール.エクスポート = {
 店
}

const { store } = require('./redux/index');

//アプリ.js
アプリ（{
 グローバルデータ: {
  $store: ストア、
  getState: ()=> store.getState(),
 }
})

const { store } = require('../redux/index');

const initPage = (params = {}, connect = []) => {
 定数{ 
  onLoad = ()=>{},
  onShow = ()=>{},
  非表示 = ()=>{},
  onUnload = ()=>{},
  データ = {}
  } = パラメータ;

 定数newPage = {
  ...パラメータ、
  //----------------
  OnLoad(...p) {
   onLoad.bind(this)(...p);
  },
  OnShow(...p) {
   onShow.bind(this)(...p);
  },
  OnHide(...p) {
   onHide.bind(this)(...p);
  },
  アンロード時(...p) {
   onUnload.bind(this)(...p);
  },
  //----------------
  // リスナーをクリアする clearStoreSubscribe() {
   （this.storeSubscribe）の場合{
    this.storeSubscribe();
    this.storeSubscribe = 未定義;
   }
  },
  // reduxでデータを取得する
  新しいデータを取得する() {
   定数 newItems = {};

   定数状態 = this.$store.getState();

   (接続) の場合
    Array.isArray(connect) の場合 {
     connect.forEach((キー) => {
      定数値 = 状態[キー];
      if (値 && this.data[キー] !== 値) {
       newItems[キー] = 値
      }
     })
    } そうでない場合 (typeof connect === 'function') {
     const リスト = connect(状態) || {};
     Object.keys(リスト).forEach((キー) => {
      const 値 = リスト[キー];
      if (値 && this.data[キー] !== 値) {
       newItems[キー] = 値
      }
     })
    }
   }

   新しいアイテムを返します。
  },
  // Reduxの変更をリッスンする handleReduxChange() {
   this.setData({
    ...this.getNewData()、
   });
  },
  //----------------
  データ： {
   ...データ
  },
  onLoad(...p) {
   const アプリ = getApp()
   this.$store = app.globalData.$store;
   this.setData({
    ...this.getNewData()、
   });

   this.OnLoad(...p);

   this._isOnLoad = true;
  },
  onShow (...p) {
   （！this.storeSubscribe）の場合{
    this.storeSubscribe = this.$store.subscribe(()=>this.handleReduxChange());
   }

   （！this._isOnLoad）の場合{
    this.setData({
     ...this.getNewData()、
    });
   }


   this.OnShow(...p);

   this._isOnLoad = false;
  },
  onHide(...p) {
   this.OnHide(...p);

   this.clearStoreSubscribe();
  },
  onUnload(...p) {
   this.OnUnload(...p);

   this.clearStoreSubscribe();
  },
  //----------------
  ディスパッチ(...p) {
   もし（this.$store）{
    this.$store.dispatch(...p) を返します。
   }
  }
 }

 新しいページを返します。
}

const PageW = (params = {}, mapState = [], mapDispatch = ()=>{}) => {
 const ページ = initPage({...params}, mapState);
 ディスパッチリストをマップストアに格納します。

 page.mapDispatch = {
  ...ディスパッチリスト
 };

 Page(ページ)を返します。
}

モジュールをエクスポートします。

PageW は '../../pageW/index' を必要とします。
const { ActionsFun } = require('../../redux/testItem/actions');

定数ページ = {
 データ： {
  4 ： 4月
 },
 オンロード() {
  console.log('sub onLoad');
 },
 オンショー() {

 },
 トテスト() {
  コンソールにログ出力します。
  wx.navigateTo({
   URL: '/pages/test/index'
  })
 },
 ボタン1() {
  コンソールにログ出力します。
  this.mapDispatch.add2();
 },
 ボタン2() {
  定数 wwj は this.data です。
  this.setData({
   wwj: wwj + 2
  });
 },
}

const mapState = [ 'testItem', 'testItem2' ];

const mapDispatch = ({dispatch}) => {
 戻る {
  add2: (params) => ディスパッチ(ActionsFun.add(params))
 }
}

PageW(ページ、マップ状態、マップディスパッチ);