Как обработать второй onClick, чтобы инициировать запрос API с использованиемactJS и redux? - PullRequest
Новая
       30

Как обработать второй onClick, чтобы инициировать запрос API с использованиемactJS и redux?

0 голосов
/ 12 января 2019

Я новичок в редуксе, и я создаю небольшое приложение для рендеринга API onClick. Я вызываю создателя действия внутри componentDidMount, который способен сгенерировать желаемый результат первым щелчком мыши. Однако, так как componentDidMount рендерит только один раз, ничего не происходит при втором «щелчке».

Следующий код - это компонент, содержащий onClick, называемый handleFavClick. Внутри этой функции запускаются два создателя действий, один из которых идентифицирует нажатую кнопку и добавляет ее в состояние для использования во втором создателе действия, который получает API . 

import React from 'react';
import { connect } from 'react-redux';
import '../stylesheet/FavoriteList.css';
import { uploadGif } from '../actions';

import Display from './Display';




class FavoriteList extends React.Component {


handleFavClick = (id) => {
    this.props.uploadGif(id);
    this.displayGif();
}

displayGif = () => {
    this.setState({display: true});
};


renderList = (callback) => {
    let fullList = this.props.favsList.map(function(cur, index) {
        return (
        <button onClick={function() {
            callback(index);
        }} className="list-item" key={index}>{cur}</button>
        )
    });
    return fullList;
}

render() {
    return (
        <div>
            <div className="favs">
                <h2>Favorite List</h2>
                <ul className="unordered-list">
                    {this.renderList(this.handleFavClick)}
                </ul>
            </div>
            {this.state.display && <Display />}
        </div>

    )
}
}

const mapDispatchToProps = {
uploadGif,

}

const mapStateToProps = (state) => {
return {
favsList: state.myFirstReduxKey,

}
};

export default connect(mapStateToProps, mapDispatchToProps)(FavoriteList);

Компонент отображения (после запуска onClick этот компонент визуализируется, и отображение обновляется данными, полученными из запроса API) 

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

import { getGif } from '../actions';

class Display extends React.Component {
    componentDidMount() {
        const list = this.props.gifList;
        const item = this.props.chosenGif;
        this.props.getGif(list[item]);
   }

.
.
.
.

const mapStateToProps = (state) => {
    return {
    gifList: state.myFirstReduxKey,
    chosenGif: state.uploadGif,
    gifs: state.getGif
    }
}


export default connect(mapStateToProps, { getGif })(Display);

Вызывается создатель действий 

export const getGif = (action) => async dispatch => {
    const key = 'GRghbyFwY5CEhc1h7ngS9KBEK9s2W3zBa'
    const response = await gifApi.get(`search?q=${action}&api_key=${key}`)
    .then(function(response) {
        return response.data.data
    });


    dispatch({ type: GET_GIF, payload: response})
};

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

1 Ответ

0 голосов
/ 12 января 2019

Ваш код выглядит хорошо, но есть одна вещь, которую вам нужно изменить, чтобы эта работа ожидала, например, как вы сказали, поскольку ваш код находится в componentDidMount, это сработает только в жизненном цикле создания компонента, теперь есть две вещи, которые вы можете сделать.

1. ** Переместите this.props.getGif(list[item]) в ** рендер () ( Рекомендуется ): 

 import React from 'react';
 import { connect } from 'react-redux';    
 import { getGif } from '../actions';

    class Display extends React.Component {
       render(){
            const list = this.props.gifList; //this code gets executed every time
            const item = this.props.chosenGif;
            this.props.getGif(list[item]);
       }
    }

    const mapStateToProps = (state) => {
       return {
        gifList: state.myFirstReduxKey,
        chosenGif: state.uploadGif,
        gifs: state.getGif
      }
    }


export default connect(mapStateToProps, { getGif })(Display);

2. Иметь отдельный обработчик, и оба componentDidMount и componentDidUpdate называют его: 

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

import { getGif } from '../actions';

class Display extends React.Component {
   componentDidMount() {
        this.loadGifHandler();
   }

   componentDidUpdate() {
        this.loadGifHandler();
   }


   loadGifHandler = () => {
        const list = this.props.gifList;
        const item = this.props.chosenGif;
        this.props.getGif(list[item]);
   }

.
.
.
.

const mapStateToProps = (state) => {
    return {
    gifList: state.myFirstReduxKey,
    chosenGif: state.uploadGif,
    gifs: state.getGif
    }
}


export default connect(mapStateToProps, { getGif })(Display);
...