ホームページ > 記事 > WeChat アプレット > 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 サイトの他の関連記事を参照してください。