反応+リダックスをゼロから

今回は、react+redux をゼロから始める場合の注意点を紹介します。以下は実際のケースです。

環境の準備

便宜上、ここでは create-react-app を使用して反応環境を構築します

create-react-app mydemo

ポップアップ設定

反応設定をカスタマイズする必要がある場合は、次のコマンドを実行する必要があります設定ファイルをポップアップ表示します。

npm run eject

reduxのインストール

npm i redux --save

わかりやすい

reduxの簡単な使い方は、ストアを通じて情報を購読し公開することです。

サブスクライブを通じてアクションをサブスクライブし、ディスパッチを通じてアクションをトリガーします。リデューサーは、各アクションが何を行う必要があるかを定義します。

デモコード

reducer定義

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;
  }
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

エントリファイルindex.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
  ReactDOM.render(
    <App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
    document.getElementById('root')
  );
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
 render() {
  var store=this.props.store;
  var num=store.getState();
  return (
   <p className="App">
    <h1>现在有机关枪{this.props.num}把。</h1>
    <button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
    <button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
   </p >
  );
 }
}
export default App;

はストアディスパッチを通じてアクションをトリガーし、index.jsでサブスクライブされたイベントが実行されます。

reduxの非同期実行

reduxで非同期操作を実行する必要がある場合は、react-thunkプラグインをインストールする必要があります

npm i react-thunk --save

同時にreduxプラグインのapplyMiddlewareが必要です

キーコード

設定は実際には非常に簡単で、ストアを作成するときに、それにサンクを渡すだけです。

import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

app.js に非同期操作をトリガーするボタンを追加します。Reducer に非同期メソッドが定義されています。

export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

メソッドを非同期的に呼び出すと、2 つのパラメーターを持つメソッドが返されます。両方のパラメーターは関数であり、1 つ目はディスパッチ関数、2 つ目は getState 関数です。
dispatch はアクションをトリガーし、getState は状態の値を取得します。

app.js にコードを追加します

<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

React diff アルゴリズムの使用方法

Vue プロジェクト API インターフェイスの管理方法

以上が反応+リダックスをゼロからの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。