Apakah maksud fluks dalam tindak balas?

Secara tindak balas, fluks ialah penyelesaian pengurusan keadaan awam, yang digunakan untuk membina seni bina aplikasi aplikasi web sebelah pelanggan dan mengurus keadaan awam dalam bentuk aliran data sehala.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah itu fluks

flux ialah penyelesaian pengurusan negeri awam serupa dengan vuex in react, yang digunakan secara rasmi oleh Facebook Build the application architecture aplikasi web pelanggan dan mengurus status awam menggunakan aliran data sehala .

Ia lebih seperti corak daripada rangka kerja formal Pembangun boleh bermula dengan cepat dengan Flux tanpa memerlukan terlalu banyak kod baharu.

Gunakan cnpm i flux -S untuk memasang.

Komposisi fluks

• Paparan: Lihat lapisan

• Tindakan : Mesej dihantar oleh paparan

• Penghantar: Penghantar, digunakan untuk menerima Tindakan dan melaksanakan fungsi panggil balik

• Simpan: Lapisan data, keadaan storan, Sekali perubahan berlaku,

aliran kerja fluks

Ciri terbesar Fluks ialah "aliran sehala" data.

• Pengguna mengakses View

• Lihat isu Tindakan pengguna

• Penghantar menerima Tindakan dan meminta kemas kini kedai sewajarnya

• Selepas Kedai dikemas kini, acara "perubahan" dikeluarkan

• Lihat Selepas menerima acara "perubahan", halaman dikemas kini

Dalam proses di atas, data sentiasa mengalir "sehala", dan "aliran dua hala" data tidak akan berlaku di mana-mana bahagian bersebelahan. Ini memastikan kejelasan proses.

Selepas membaca ini, anda mungkin berasa keliru, OK, ini perkara biasa. Seterusnya, saya akan menerangkan setiap langkah secara terperinci.

Lihat (Bahagian 1)

Sila buka halaman utama Demo index.jsx dan anda akan melihat bahawa hanya satu komponen dimuatkan.

// index.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var MyButtonController = require('./components/MyButtonController');

ReactDOM.render(
  <MyButtonController/>,
  document.querySelector(&#39;#example&#39;)
);

Dalam kod di atas, anda mungkin perasan bahawa nama komponen bukan MyButton, tetapi MyButtonController. kenapa begitu?

Di sini, saya menggunakan mod paparan pengawal React. Komponen "pandangan pengawal" hanya digunakan untuk menyimpan keadaan dan kemudian memajukannya kepada komponen anak. Kod sumber MyButtonController sangat mudah.

// components/MyButtonController.jsx
var React = require('react');
var ButtonActions = require('../actions/ButtonActions');
var MyButton = require('./MyButton');

var MyButtonController = React.createClass({
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      onClick={this.createNewItem}
    />;
  }
});

module.exports = MyButtonController;

Dalam kod di atas, MyButtonController menghantar parameter kepada subkomponen MyButton. Kod sumber untuk yang terakhir adalah lebih mudah.

// components/MyButton.jsx
var React = require('react');

var MyButton = function(props) {
  return <div>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

Dalam kod di atas, anda dapat melihat bahawa MyButton ialah komponen tulen (iaitu, ia tidak mengandungi sebarang keadaan), yang memudahkan ujian dan penggunaan semula. Ini adalah kelebihan terbesar mod "pandangan kawalan".

MyButton hanya mempunyai satu logik, iaitu memanggil kaedah this.createNewItem untuk menghantar Tindakan kepada Penghantar sebaik sahaja pengguna mengklik.

// components/MyButtonController.jsx

  // ...
  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  }

Dalam kod di atas, memanggil kaedah createNewItem akan mencetuskan Tindakan bernama addNewItem.

Tindakan

Setiap Tindakan ialah objek, mengandungi atribut actionType (menghuraikan jenis tindakan) dan beberapa atribut lain (digunakan untuk menghantar data).

Dalam Demo ini, objek ButtonActions digunakan untuk menyimpan semua Tindakan.

// actions/ButtonActions.js
var AppDispatcher = require('../dispatcher/AppDispatcher');

var ButtonActions = {
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: 'ADD_NEW_ITEM',
      text: text
    });
  },
};

Dalam kod di atas, kaedah ButtonActions.addNewItem menggunakan AppDispatcher untuk menghantar tindakan ADD_NEW_ITEM ke Kedai.

Penghantar

Fungsi Penghantar adalah untuk menghantar Tindakan ke Simpan. Anda boleh menganggapnya sebagai penghala, bertanggungjawab untuk mewujudkan laluan penghantaran yang betul untuk Tindakan antara Lihat dan Kedai. Ambil perhatian bahawa hanya terdapat satu Penghantar dan ia adalah global.

Pelaksanaan Dispatcher rasmi Facebook mengeluarkan kelas, anda perlu menulis AppDispatcher.js untuk menjana tika Dispatcher. Kaedah

// dispatcher/AppDispatcher.js
var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();

AppDispatcher.register() digunakan untuk mendaftarkan fungsi panggil balik untuk pelbagai Tindakan.

// dispatcher/AppDispatcher.js
var ListStore = require('../stores/ListStore');

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

Dalam kod di atas, apabila Dispatcher menerima tindakan ADD_NEW_ITEM, ia akan melaksanakan fungsi panggil balik dan beroperasi pada ListStore.

Ingat, Dispatcher hanya digunakan untuk menghantar Tindakan dan tidak sepatutnya mempunyai logik lain.

Stor

Stor menyimpan keadaan keseluruhan aplikasi. Peranannya sedikit seperti Model dalam seni bina MVC.

Dalam demo kami, terdapat ListStore di mana semua data disimpan.

// stores/ListStore.js
var ListStore = {
  items: [],

  getAll: function() {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit('change');
  }
};

module.exports = ListStore;

Dalam kod di atas, ListStore.items digunakan untuk menyimpan entri, ListStore.getAll() digunakan untuk membaca semua entri dan ListStore.emitChange() digunakan untuk mengeluarkan peristiwa "perubahan".

Memandangkan Kedai perlu menghantar acara "perubahan" kepada Lihat selepas perubahan, ia mesti melaksanakan antara muka acara.

// stores/ListStore.js
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

var ListStore = assign({}, EventEmitter.prototype, {
  items: [],

  getAll: function () {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit('change');
  },

  addChangeListener: function(callback) {
    this.on('change', callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener('change', callback);
  }
});

上面代码中，ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。

Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），表明状态已经改变。 View 监听到这个事件，就可以查询新的状态，更新页面了。

View （第二部分）

现在，我们再回过头来修改 View ，让它监听 Store 的 change 事件。

// components/MyButtonController.jsx
var React = require('react');
var ListStore = require('../stores/ListStore');
var ButtonActions = require('../actions/ButtonActions');
var MyButton = require('./MyButton');

var MyButtonController = React.createClass({
  getInitialState: function () {
    return {
      items: ListStore.getAll()
    };
  },

  componentDidMount: function() {
    ListStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    ListStore.removeChangeListener(this._onChange);
  },

  _onChange: function () {
    this.setState({
      items: ListStore.getAll()
    });
  },

  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      items={this.state.items}
      onClick={this.createNewItem}
    />;
  }
});

上面代码中，你可以看到当MyButtonController 发现 Store 发出 change 事件，就会调用 this._onChange 更新组件状态，从而触发重新渲染。

// components/MyButton.jsx
var React = require('react');

var MyButton = function(props) {
  var items = props.items;
  var itemHtml = items.map(function (listItem, i) {
    return <li key={i}>{listItem}</li>;
  });

  return <div>
    <ul>{itemHtml}</ul>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

推荐学习：《react视频教程》

Atas ialah kandungan terperinci Apakah maksud fluks dalam tindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!