Почему диспетчеризация внутри асинхронной функции не диспетчеризирует действие?

Question

В настоящее время я хочу отправить действие внутри асинхронной функции, но действие не отправляется?Причина использования Redux заключается в том, что я хочу добавить кнопку «Мне нравится» к любым изображениям, которые фильтруются поисковым вводом.

Ссылка на все приложение, над которым я работаю .... --- перейдите в файл компоненты / App.js

import React from 'react';
import SearchBar from './SearchBar';
import unsplash from '../api/unsplash';
import ImageList from './ImageList';
import { fetchImages } from '../actions';
import { connect } from 'react-redux';

class App extends React.Component {
  state = { images: [] };

  onSearchSubmit = term => {  

    return async (dispatch) => {

      const response = await unsplash.get('/search/photos', {
        params:{ query: term },
        //use the path on unsplash for image searching
      })

      let success = response.data.results
      
      dispatch(fetchImages(success));
      return success;
      // this.setState({ images: response.data.results });
    }
    
  }

  render() {
    return (<div className="ui container" style={{marginTop:'10px'}}> 
      <SearchBar onSubmit={this.onSearchSubmit}/>
      <ImageList images={this.state.images}/>
    </div>);
  }
}

const mapDispatchToProps = (dispatch) => ({

    fetchImages: images => dispatch(fetchImages(images))

})

export default connect(null, mapDispatchToProps)(App);

Answer 1

Модификация кода @Fiodorov Andrei немного.

Вот способ без bindActionCreators.

Просто определите функцию в mapDispatchToProps как "onSearchSubmit" и отправьте туда действие (просто один вкладыш :))

import React from "react";
import SearchBar from "./SearchBar";
import ImageList from "./ImageList";
import { fetchImages } from "../actions";
import { connect } from "react-redux";

class App extends React.Component {
  state = { images: [] };

  render() {
    const { onSearchSubmit } = this.props;

    return (
      <div className="ui container" style={{ marginTop: "10px" }}>
        <SearchBar onSubmit={onSearchSubmit} />
        <ImageList images={this.props.images} />
      </div>
    );
  }
}

export default connect(
  state => ({
    images: state.images
  }),
  dispatch => ({
    onSearchSubmit: term => dispatch(fetchImages(term)),
  })
)(App);

codesandbox

Answer 2

Я получу больше обновлений о вашем проекте.см. примеры кода и коробки!

import React from "react";
import SearchBar from "./SearchBar";
import ImageList from "./ImageList";
import { fetchImages } from "../actions";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

class App extends React.Component {

  onSearchSubmit = term => {
    this.props.fetchImages(term);
  };

  render() {
    return (
      <div className="ui container" style={{ marginTop: "10px" }}>
        <SearchBar onSubmit={this.onSearchSubmit} />
        <ImageList images={this.props.images} />
      </div>
    );
  }
}

export default connect(
  state => ({
    images: state.images
  }),
  dispatch => ({
    fetchImages: bindActionCreators(fetchImages, dispatch)
  })
)(App);

Действие:

export function fetchImages(term) {
  return function action(dispatch, getState) {
    unsplash
      .get("/search/photos", {
        params: { query: term }
        //use the path on unsplash for image searching
      })
      .then(res => {
        console.log(res.data.results);
        dispatch({ type: types.FETCH_BUTTON, payload: res.data.results });
      });
  };
}

И состояние:

export const images = (state = [], action) => {
  switch (action.type) {
    // ...
    case types.FETCH_BUTTON:
      return Object.assign([], state, [...action.payload]);
    default:
      return state;
  }
};

Рабочий пример:

Answer 3

Вы уже сопоставили отправку с вашими реквизитами, и вам не нужно звонить dispatch(fetchImages()).Попробуйте вместо этого вызвать сопоставленную функцию:
this.props.fetchImages()