Переместить все функции API за пределы компонента React

Question

У меня есть приложение React, в котором все функции API находятся в компоненте React LandingContainer.js

export default class LandingContainer extends Component {
    constructor(props) {
        super(props);
        
        this.methods = this.methods.bind(this); 
        // etc for each function

    }

    login(e) {//etc implementation}
    createAccount(e) {}
    deleteCv(id) {}
    //etc
}

Я хочу переместить все эти методы в один файл; его единственная цель - хранить функции и вызывать из LandingContainer.js. Функции используют события, состояние, localStorage, js-cookie, небольшие манипуляции с DOM и переданные параметры, такие как id.

Файл не обязательно должен быть компонентом React, хотя я подозреваю иначе невозможно обработать состояние.

Я понятия не имею, как я собираюсь подойти к этому.

Answer 1

Совет @Achraf в основном работал.

Я переместил все функции в API.js и импортировал их, но вместо того, чтобы они возвращали значения. Я связал функции с компонентом LandingContainer.js.

Функциональность, насколько я могу судить, на 100% такая же, включая доступ к состоянию, событиям и localStorage.

import {login, createAccount, getCVs} from '../_services/API';

export default class LandingContainer extends Component {
    constructor(props) {
        super(props);

        this.getCVs = getCVs.bind(this);
        this.login = login.bind(this);
        this.createAccount = createAccount.bind(this);
        //etc

Answer 2

Вы можете переместить все свои функции в другой файл и получить к ним доступ с помощью импорта и установить для возвращаемой переменной состояние. Вот пример:

myFunctions. js:

function login(args) {
    const value = "something"
    return value;
}

function register(args) {
    const value = "something"
    return value;
}

module.exports = {login, register}

и получите доступ к этим функциям из вашего компонента реакции и установите состояние из случайной функции, которая соответствует вашим потребностям.

import {login, register} from './myFunctions';

export default class LandingContainer extends Component {
    constructor(props) {
        super(props);
    
        this.methods = this.methods.bind(this); 
        // etc for each function

    }

    myFunction(args) {
        const loginValue = login(args);
        this.setState({login: loginValue})
    }
}

Надеюсь, это поможет