ホームページ > 記事 > ウェブフロントエンド > React-reduxプラグインプロジェクトの実際の使用状況分析
今回は、react-redux プラグイン プロジェクトの実際の使用に関する分析をお届けします。 以下は、react-redux プラグイン プロジェクトを実際に使用する際の注意点です。一見。
まず redux の簡単な紹介をご覧ください
react-redux の紹介
react-redux は redux を使用して React を開発するときに使用されるプラグインです。また、redux は React の製品ではありません。 、vue と angular で使用されます。redux も使用できます。ここでは、react-redux を使用して React を開発する方法について簡単に説明します。
説明
このプラグインは、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 サイトの他の関連記事に注目してください。
推奨読書:
jqueryを使用してアップロードされたファイルの特定のコンテンツを取得する
以上がReact-reduxプラグインプロジェクトの実際の使用状況分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。