今回は、react-reduxプラグインの使い方と、react-reduxプラグインを使用する際の注意点を紹介します。実際の事例を見てみましょう。
react-reduxの紹介
react-reduxはreduxを使用してreactを開発する際に使用するプラグインです。また、reduxはreactの製品ではなく、vueやangularreduxでも使用できます。 ; 以下に、react-redux を使用して反応を開発する方法を簡単に説明します。
説明
このプラグインは、redux コードをより簡潔で美しくすることができます。 create-react-app で作成した hello world を表示できる React 環境が既にあり、redux がインストールされていると仮定します。
注: create-react-app を使用して作成したばかりの場合は、構成をカスタマイズできるように、npm run eject を実行して個人設定をポップアップ表示する必要があります。
インストール
npm i react-redux --save
使用
react-redux は、プロバイダーと接続という 2 つの重要なインターフェイスを提供します。このプラグインを使用すると、react-redux のサブスクライブとディスパッチを忘れることができ、それらは必要なくなります。 。
コード構造
//index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { reducer } from './index.redux'; import { Provider } from 'react-redux' const store = createStore(reducer, applyMiddleware(thunk)); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); registerServiceWorker();
Providerのアプリケーションの最外層にストアを渡し、今回のみ使用します。
//app.js import React, { Component } from 'react'; import { addCreator, removeCreator, addAsync } from './index.redux'; import { connect } from 'react-redux'; class App extends Component { render() { return ( <p className="App"> <h1>现在有美女{this.props.num}个。</h1> <button onClick={this.props.addCreator}>add</button> <button onClick={this.props.removeCreator}>remove</button> <button onClick={this.props.addAsync}>addAsync</button> </p > ); } } //定义把state中哪个属性放到props中 function mapStateToProps(state) { return { num: state } } //定义把哪些方法放到props中 const actionCreators={ addCreator, removeCreator, addAsync }; //connect其实就是一个高阶组件,把app传进去,返回一个新的app组件 App = connect(mapStateToProps, actionCreators)(App); export default App;
connect はコンポーネントが必要とするパラメータを外部から取得する役割を果たします。 connect を通じて定義した後、props に配置されたプロパティとメソッドは、this.props を通じて直接取得できます。
リデューサーの定義は以下の通りです。
//react.redux.js const Add = 'addGirl', Remove = "removeGirl"; export function reducer(state = 0, action) { switch (action.type) { case Add: return state + 1; case Remove: return state - 1; default: return 10; } } export function addCreator() { return { type: Add }; } export function removeCreator() { return { type: Remove }; } export function addAsync() { return (dispatch, getState) => { setTimeout(function () { dispatch(addCreator()); }, 1000); } }
デコレータを使用して Conect をよりエレガントに記述します
まず、babel-plugin-transform-decorators-legacy をインストールし、package.json で設定する必要があります。
インストール
npm i babel-plugin-transform-decorators-legacy --save-dev これは開発専用なので、--save-dev にインストールします
Configuration
babel のプラグインのプロパティを設定します
"babel": { "presets": [ "react-app" ], "plugins": [ ["transform-decorators-legacy"] ] }
元の書き方を修正
@connectを使って再定義してクラスの上に書きます。
//App.js @connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync }) class App extends Component { .....//省略 // function mapStateToProps(state) { // return { num: state } // } // App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);
VS Code デコレータ プロンプト「experimentalDecorators」に対する解決策
Visual Studio Code の左下隅にある構成ボタン (または [ファイル] > [環境設定] > [構成]、Windows 環境) をクリックして、ユーザー設定ウィンドウを開きます。検索ボックスに「experimentalDecorators」と入力すると、次のようにオプションが表示されることがわかります:
"javascript.implicitProjectConfig.experimentalDecorators": false
それを true に変更するだけです。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
Vue を使用して双方向データ バインディングを作成する方法
以上がReact-reduxプラグインの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。