Как включить поддельный API из функции в приложение React.JS - PullRequest
Новая
       19

Как включить поддельный API из функции в приложение React.JS

2 голосов
/ 05 июня 2019

Я не знаю, как включить поддельную дату из существующей функции.Я создаю приложение с редуксом.И простые тесты работают.

Когда я включаю дату в HTML и вызываю функцию FruitasticApi, все работает.Но если я хочу импортировать в компонент, я получаю ошибки, потому что в моем фальшивом файле даты нет экспорта

У меня есть FruitasticApi.js (где у меня есть несколько массивов с данными).

Это FruitastaticApi.js 

(function(container) {
  var names = [
    'Chris', 'Svetla', 'Duncan', 'Vlad', 'Dennis', 'Amir', 'Kunjan', 'Aaron', 'Kirby', 'Michael',
    'Bryan', 'Edward', 'Stan', 'Eric', 'Jennifer', 'Kristy', 'Jason', 'Phoebe', 'Kate', 'Denise',
    'Abigail', 'Ethan', 'Lucia', 'Harry', 'David', 'Cameron', 'Erica', 'Sophie', 'Francis', 'Brian',
    'Paco', 'Luke', 'Margie', 'Sacha', 'Desmond', 'Ruby', 'Wanda', 'Rosalie', 'Angel', 'Layla', 'Flynn',
    'Anthony', 'Jasmine', 'Janie', 'Debbie', 'Keith', 'Porter', 'Francisco', 'Javier', 'Rudolph'
  ];
  var letters = 'ABCDEFGHIJKLMNOPRSTVWY'.split('');
  var fruits = [
    'blackberries', 'apple', 'orange', 'banana', 'pear', 'watermelon', 'cherries', 'mango',
    'grapes', 'apple', 'orange', 'cantaloupe', 'strawberries', 'kiwi', 'pineapple', 'pomegranate'
  ];

  var fruitsAPI = {
    get: function(callback) {
      var iter = 30 + Math.round(Math.random() * 50);

      var fruitIter = 3 + Math.ceil(Math.random() * 4);
      var availFruits = pickFruits(fruitIter);

      var arr = [];
      for (var i = 0; i < iter; i++) {
        var randF = Math.floor(Math.random() * names.length);
        var randL = Math.floor(Math.random() * letters.length);
        var randFruit = Math.floor(Math.random() * availFruits.length);
        arr[i] = {
          name: names[randF] + ' ' + letters[randL] + '.',
          favoriteFruit: availFruits[randFruit]
        }
      }
      var timeout = Math.floor(Math.random() * 500) + 100;
      setTimeout(function() {
        if (callback) {
          callback(arr);
        }
      }, timeout);
    }
  };

  function pickFruits(num) {
    var availFruits = [];
    var rerun = true;
    while (rerun) {
      for (var j = 0; j < num; j++) {
        var index = Math.floor(Math.random() * fruits.length);
        availFruits.push(fruits[index]);
      }
      var seen = availFruits[0];
      for (var i = 1; i < availFruits.length; i++) {
        if (availFruits[i] !== seen) {
          rerun = false;
        }
      }
    }
    return availFruits;
  }

  container.FruitasticApi = fruitsAPI;
})(window);

Вот что я пытался сделать: 

import React, { Component } from 'react';
import { simpleAction } from './actions/fruitaStaticAPI';
import { FruitasticApi } from './FruitasticApi'
import { connect } from 'react-redux';
import './main.css';

class App extends Component {
  render() {
    console.log(FruitasticApi)
    return (
      <div className="App">


      </div>
    );
  }
}
const mapStateToProps = state => ({
  ...state
})
const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
})
export default connect(mapStateToProps, mapDispatchToProps)(App);

Это моя задача: загружать данные, вызывая FruitasticApi.get().

Ответы [ 2 ]

2 голосов
/ 05 июня 2019

Просто сделайте обычный export без области изоляции: 

(function(container) {
//...
})(window);

И просто экспортируйте (последняя строка в файле) 

export const FruitasticApi = fruitsAPI;

И затем, вы можете импортировать егов файле компонента: 

import { FruitasticApi } from './FruitasticApi'

Рабочий пример: https://stackblitz.com/edit/react-wekuan

Не забудьте открыть консоль

Или, если вы должны использовать изоляционный подход, ваш код назначает FruitasticApi окну 

container.FruitasticApi = fruitsAPI;

Итак, вы можете получить его в файле компонента, используя 

console.log(window.FruitasticApi);

Рабочий пример: https://stackblitz.com/edit/react-wshnyh

0 голосов
/ 05 июня 2019

Вы должны иметь свой FruitasticApi как постоянную функцию, подобную этой: 

export const FruitasticApi = callback => {
  var names = [
    'Chris',
    'Svetla',
    'Duncan',
    'Vlad',
    'Dennis',
    'Amir',
    'Kunjan',
    'Aaron',
    'Kirby',
    'Michael',
    'Bryan',
    'Edward',
    'Stan',
    'Eric',
    'Jennifer',
    'Kristy',
    'Jason',
    'Phoebe',
    'Kate',
    'Denise',
    'Abigail',
    'Ethan',
    'Lucia',
    'Harry',
    'David',
    'Cameron',
    'Erica',
    'Sophie',
    'Francis',
    'Brian',
    'Paco',
    'Luke',
    'Margie',
    'Sacha',
    'Desmond',
    'Ruby',
    'Wanda',
    'Rosalie',
    'Angel',
    'Layla',
    'Flynn',
    'Anthony',
    'Jasmine',
    'Janie',
    'Debbie',
    'Keith',
    'Porter',
    'Francisco',
    'Javier',
    'Rudolph',
  ];
  var letters = 'ABCDEFGHIJKLMNOPRSTVWY'.split('');
  var fruits = [
    'blackberries',
    'apple',
    'orange',
    'banana',
    'pear',
    'watermelon',
    'cherries',
    'mango',
    'grapes',
    'apple',
    'orange',
    'cantaloupe',
    'strawberries',
    'kiwi',
    'pineapple',
    'pomegranate',
  ];

  var fruitsAPI = {
    get: function(callback) {
      var iter = 30 + Math.round(Math.random() * 50);

      var fruitIter = 3 + Math.ceil(Math.random() * 4);
      var availFruits = pickFruits(fruitIter);

      var arr = [];
      for (var i = 0; i < iter; i++) {
        var randF = Math.floor(Math.random() * names.length);
        var randL = Math.floor(Math.random() * letters.length);
        var randFruit = Math.floor(Math.random() * availFruits.length);
        arr[i] = {
          name: names[randF] + ' ' + letters[randL] + '.',
          favoriteFruit: availFruits[randFruit],
        };
      }
      var timeout = Math.floor(Math.random() * 500) + 100;
      setTimeout(function() {
        if (callback) {
          callback(arr);
        }
      }, timeout);
    },
  };

  function pickFruits(num) {
    var availFruits = [];
    var rerun = true;
    while (rerun) {
      for (var j = 0; j < num; j++) {
        var index = Math.floor(Math.random() * fruits.length);
        availFruits.push(fruits[index]);
      }
      var seen = availFruits[0];
      for (var i = 1; i < availFruits.length; i++) {
        if (availFruits[i] !== seen) {
          rerun = false;
        }
      }
    }
    return availFruits;
  }

  return fruitsAPI.get(callback);
};

Теперь, если вы попытаетесь вызвать его из вашего компонента: 

import React, { Component } from 'react';
import { simpleAction } from './actions/fruitaStaticAPI';
import { FruitasticApi } from './FruitasticApi'
import { connect } from 'react-redux';
import './main.css';

class App extends Component {
  render() {
    FruitasticApi(data => console.log(data))
    return (
      <div className="App">


      </div>
    );
  }
}
const mapStateToProps = state => ({
  ...state
})
const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
})
export default connect(mapStateToProps, mapDispatchToProps)(App);

Вы должны увидеть результаты в консоли.

...