How to use external image url with react flux store?

问题

I'm accessing data from server with react flux utils and stored the data on flux store. This data contains heading content, description content and image external url (like, http://www.google.com/sample.jpg). I have locally stored all data's with react flux store. When i revisiting the page which is already visited that page images getting reload again. It should not happen. Because that images already loaded. How to fix this issue?

Data structure,

[
 {
   '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'
 }
]

Api

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

Dispatcher

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;

Constant

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

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

Actions

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;

Store

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;

来源：https://stackoverflow.com/questions/39433513/how-to-use-external-image-url-with-react-flux-store

标签

javascript

reactjs

react-router

reactjs-flux