React-reduxプラグインの使い方

今回は、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 を使用してカウントダウン ボタンを実装する方法

Vue を使用して双方向データ バインディングを作成する方法

以上がReact-reduxプラグインの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。