Реакция: преобразование этого компонента на основе класса в компонент перехвата - PullRequest
Новая
       3

Реакция: преобразование этого компонента на основе класса в компонент перехвата

0 голосов
/ 22 марта 2020

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

Мне нужно помочь с моим классом MainSearch. 

import React from 'react';
import { searchArtist, fetchPosts } from '../../actions';
import { connect } from 'react-redux';

class MainSearch extends React.Component {
  onInputChange = event => {
    this.props.searchArtist(event.target.value);
  };

  onSubmit = event =>{
    event.preventDefault();

    this.props.fetchPosts(this.props.text.text)
  }


  render() {
    return (
      <div className="ui text container">
      <form className="ui form" onSubmit={this.onSubmit}>
          <div className="field">
          <div className="ui search">
          <div className="ui icon input">
            <input placeholder="Search..."
              type="text"
              name="searchText"
              onChange={this.onInputChange}
            />
            <i className="search icon"></i>
            </div>
            </div>           
          </div>
        </form>
      </div>
    );
  }
}

const mapStateToProps = state => {
 return { text: state.search }
}

export default connect( mapStateToProps , { searchArtist, fetchPosts }) (MainSearch);

И это те действия, которые вызывает класс. 

import discogs from "../apis/discogs";
import history from "../history";
import {
  FETCH_POSTS,
  SEARCH_ARTIST,
  FETCH_ARTIST_DETAILS,
  CLEAN_ARTIST_DETAILS
} from "./types";

export const fetchPosts = text => async dispatch => {
  const response = await discogs.get(`/database/search?q=${text}&type=artist`);
  dispatch({ type: FETCH_POSTS, payload: response.data.results });
  history.push(`/results/${text}`);
};

export const searchArtist = text => dispatch => {
  dispatch({
    type: SEARCH_ARTIST,
    payload: text
  });
};

export const fetchArtistDetails = id => async dispatch => {
  const response = await discogs.get(`/artists/${id}`);

  dispatch({ type: FETCH_ARTIST_DETAILS, payload: response.data });
  history.push(`/details/${id}`);
};

export const cleanArtistDetails = () => async dispatch => {
  dispatch({ type: CLEAN_ARTIST_DETAILS, payload: null });
};

Любые советы или помощь будут действительно приветствоваться.

...