Question

当前，我想在async函数中分派动作，但是没有分派动作？使用Redux的原因是因为我想向搜索输入正在过滤的任何图像添加一个赞按钮。

The link to the entire App am working on.... ---转到文件组件/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

我正在对您的项目进行更多更新。请参见codeandbox示例！

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()

为什么异步函数内的调度不调度动作？

3 个答案: