Question

我使用react flux utils从服务器访问数据并将数据存储在flux store中。此数据包含标题内容，描述内容和图像外部网址（如http://www.google.com/sample.jpg）。我已经在本地存储了所有反应通量存储的数据。当我重新访问已经访问过的页面时，页面图像会再次重新加载。它不应该发生。因为那些图像已经加载了。如何解决这个问题？

数据结构，

[
 {
   'title':'title 1',
   'content':'Some copy',
   'image':'http://www.google.com/sample.jpg'
 },
 {
   'title':'title 2',
   'content':'Some copy',
   'image':'http://www.google.com/sample2.jpg'
 }
]

阿比

var Actions = require('../actions/Actions');
module.exports = {
 getProductData: function() {
  var data = JSON.parse(localStorage.getItem('items'));
  Actions.receiveProduct(data);
 }
}

分派器

var Dispatcher = require('flux').Dispatcher;

// Create dispatcher instance
var AppDispatcher = new Dispatcher();

// Convenience method to handle dispatch requests
AppDispatcher.handleAction = function(action) {
  this.dispatch({
    source: 'VIEW_ACTION',
    action: action
  });
}

module.exports = AppDispatcher;

恒

var keyMirror = require('react/lib/keyMirror');

// Define action constants
module.exports = keyMirror({
  RECEIVE_DATA: null    // Loads our mock data
});

操作

var AppDispatcher = require('../dispatcher/AppDispatcher');
var Constants = require('../constants/Constants');

// Define actions object
var MyActions = {

  // Receive inital product data
  receiveData: function(data) {
    AppDispatcher.handleAction({
      actionType: Constants.RECEIVE_DATA,
      data: data
    })
  }

};

module.exports = MyActions;

存储

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var Constants = require('../constants/Constants');
var _ = require('underscore');

// Define initial data points
var _product = {};

// Method to load product data from mock API
function loadData(data) {
  _product = data;
}
// Extend ProductStore with EventEmitter to add eventing capabilities
var ProductStore = _.extend({}, EventEmitter.prototype, {
  // Return Product data
  getProduct: function() {
    return _product;
  },
  // Emit Change event
  emitChange: function() {
    this.emit('change');
  },
  // Add change listener
  addChangeListener: function(callback) {
    this.on('change', callback);
  },
  // Remove change listener
  removeChangeListener: function(callback) {
    this.removeListener('change', callback);
  }

});

// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;
  switch(action.actionType) {
    // Respond to RECEIVE_DATA action
    case Constants.RECEIVE_DATA:
      loadData(action.data);
      break;

    default:
      return true;
  }

  // If action was responded to, emit change event
  ProductStore.emitChange();

  return true;

});

module.exports = ProductStore;

如何使用外部图像网址与反应助焊剂存储？

0 个答案: