Как сделать конструкцию компонента React ...?

Question

без фактического использования его в методе рендеринга?

У меня есть компонент React, который содержит только логику, но все еще использует dispatch () из redux.Он называется F1_Start

// import F1_Start   from './F1_Start'

Как мне запустить этот файл?

Я пытался

new F1_Start(), но это не помогло.

Я в конечном итоге переведу его в простой класс JavaScript, но тогда мне все равно потребуется доступ к dispatch()

Актуальный файл

import React from 'react';
import { connect } from 'react-redux';


class F1_Start extends React.Component {

  constructor(props) {
    super(props);
    this.fetchData();
  }

  fetchData = () => {
    const options = {
      credentials: 'include'
    };
    fetch("/api/items", options)
    .then((response) => {
      return response.json();
    })
    .then((results) => {
      this.props.dispatch({type: 'updateBookmarks', bookmarks: results});
      this.findStatus(results);
    })
    .catch((err) => {
      this.notLoggedIn();
      console.log('DEBUG: fetch /api/items error');
    });
  }

  findStatus = (results) => {
    if(results[results.length - 1].id_google){
      const user = results.slice(-1);
      this.loggedIn(user);
    } else {
      this.notLoggedIn();
    }
  }

  notLoggedIn = () => {
    window.setTimeout(() => {
      // this.props.dispatch({ type: 'updateMenu', current: 'splash' });
    }, 4000);
    window.setTimeout(() => {
      // this.props.dispatch({ type: 'toggleSideBar' });
    }, 8000);
  }

  loggedIn = (user) => {
    this.props.dispatch({ type: 'setUser', current: user[0] });
  }
}

export default connect()(F1_Start);

Answer 1

Вы можете создать простой класс F1_Start и вызывать его методы в родительском компоненте ParentComponent. Ваш простой класс может возвращать соответствующие действия, которые вы можете отправлять из родительского подключенного компонента.Таким образом, вы можете сохранить свою служебную логику отдельно.Ниже приведен код, который я мог бы придумать.

Примечание. Этот код не проверен, и его необходимо изменить в соответствии с вашими потребностями.

class ParentComponent extends React.Component{
    constructor() {
        this.fecthingData()
    }

    fecthingData() {
        let f1_Start = new F1_Start();  
        f1_Start.fetchData().then(actions => {
            actions.forEach(action => {
                this.props.dispatch(action);
            });
        })
    }
}
export default connect()(ParentComponent);


class F1_Start  {

     fetchData () {
         const actions = [];
         const options = {
            credentials: 'include'
        };
        return fetch("/api/items", options)
            .then((response) => {
                return response.json();
            })
            .then((results) => {
                actions.push ({ type: 'updateBookmarks', bookmarks: results });
                actions.push(this.findStatus(results));
                return actions;
            })
            .catch((err) => {
                console.log('DEBUG: fetch /api/items error');
                actions.push(this.notLoggedIn());
                return actions;
            });
    }

    findStatus (results) {
        if (results[results.length - 1].id_google) {
            const user = results.slice(-1);
            return this.loggedIn(user);
        } else {
            return this.notLoggedIn();
        }
    }

    notLoggedIn() {
            return { type: 'updateMenu', current: 'splash' };
     }

    loggedIn(user){
        return { type: 'setUser', current: user[0] };
    }
}

export default F1_Start;

Answer 2

Для классов React требуется метод render, и они требуют, чтобы он возвращал компонент, текст, элемент или null.

Один из способов сделать это - сделать ваш компонент простой оболочкой:

// F1_Start
class F1_Start extends Component {
  ...constructor, fetchData, etc, plus:

  render() {
    return this.props.children;
  }
}

// At (or near) the top level of your app
const App = props => (
  <Provider>
    <F1_Start>
      <RestOfTheApp />
    </F1_Start>
  <Provider>
)

Другой способ сделать это, как вы говорите, просто использовать класс JS (без React), передать в него Redux store и получить прямой доступ к store.dispatch вместо использования react-redux. connect HOC. Кажется немного странным делать это таким образом, но это должно сработать.