Блог

У меня есть класс Javascript, который действует как контроллер данных для взаимодействия с API.

Мне нужно вызывать методы этого класса из нескольких компонентов react.

В настоящее время я сохраняю экземпляр класса в хранилище redux, однако я понимаю, что это плохой подход к дизайну.

Как я могу использовать один экземпляр для нескольких компонентов?

Есть несколько способов справиться с этим. Лично я использую файл поставщика для экспорта экземпляра, который я могу импортировать, когда мне это нужно.

Допустим, мне нужно использовать один и тот же экземпляр класса, Foo , во всем моем приложении. Я бы импортировал Foo в файл поставщика, который создает и экспортирует его экземпляр. Затем я бы импортировал экземпляр от того поставщика, где он мне нужен:

Файл, Foo.js :

 class Foo {};

export default Foo;
  

Файл, FooProvider.js

 import Foo from './Foo';

export let foo = new Foo();
  

Файл компонента:

 import foo from './FooProvider';
import React, { Component } from 'react';

Class MyComponent extends Component {
    someMethod () {
        //use foo
    }
}

export default MyComponent;