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 ディレクトリにコピーします

Use

1. Redux ストアをアプリにバインドします。

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")
 }
}))

プロバイダーの実装は、ストアをグローバルオブジェクトAppに追加するだけで、ページ上でgetAppを使用して取得できるようになります

上記のコードは次と同等です:

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

2ページ定義で connect を使用して、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)),
 })

ページにマップするメソッドを定義します

rrreええ

接続を使用してください上記を変換するにはpageConfigに定義を追加します。

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

ミニプログラムを登録するページ

3. 説明

上記の2つの手順を完了すると、this.dataのmapStateToDataで定義したデータにアクセスできるようになります。

mapDispatchToPage で定義されたアクションは、このオブジェクトにマッピングされます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat ミニ プログラムの UI およびコンテナ コンポーネントの紹介

WeChat ミニ プログラムの MD5 メソッドの分析について

WeChat ミニ プログラムの新しいドラッグ コンポーネントの可動ビュー使い方のご紹介

以上がWeChat アプレットの Redux バインディングの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。