Question

我遇到了这个问题。我正在使用react redux创建一个小应用程序。

在下面的代码中是我的app.js组件。它工作正常，直到我尝试在connect中使用mapDispatchToProps函数。问题是我无法再调用componentDidMount上的调度操作。需要在comoponentDidMount上调用componentDidMount中现在位于mapStateToProps上的操作。有关如何做到的任何线索？

＆＃13;

import React, { Component } from 'react';
import './App.css';
import '../../node_modules/bootstrap/less/bootstrap.less';
import { Route } from 'react-router-dom'
import * as ReadableAPI from '../ReadableAPI'
import HeaderNavigation from './HeaderNavigation';
import TableBody from './TableBody';
import { connect } from 'react-redux';
import sortAsc from 'sort-asc';
import sortDesc from 'sort-desc';
import {
  selectedCategory,
  fetchCategoriesIfNeeded,
  fetchPostsIfNeeded,
  invalidateSubreddit,
  orderPost
} from '../actions'

class App extends Component {

		state = {
			posts: []
		}

		componentDidMount() {
			const { dispatch, selectedCategory, fetchCategories, fetchPosts} = this.props
    		//dispatch(fetchCategoriesIfNeeded(selectedCategory))
    		//dispatch(fetchPostsIfNeeded(selectedCategory))
		}

		orderByScoreAsc = (posts) => {

	      return posts.sort(sortAsc('voteScore'))

	    }

	  	orderByScoreDesc = (posts) => {

	      return posts.sort(sortDesc('voteScore'))

	    }

	  	render() {

	  	const { navCategories, posts } = this.props

	    return (
	      <div>
	        <HeaderNavigation navCategories = {navCategories} />

	        <Route exact path="/" render={()=>(
	          <TableBody 
	          	showingPosts={posts} 
	          />)}
	        />

	        
	        
	      </div>
	    );
	  }
}

function mapStateToProps ( state ) {
  const { categories, posts } = state
  return {
     navCategories: categories.items,
     posts: posts.items
  }
}

function mapDispatchToProps (dispatch) {
  return {
    changeOrder: (data) => dispatch(orderPost(data)),
    fetchCategories: (data) => dispatch(fetchCategoriesIfNeeded(data)),
    fetchPosts: (data) => dispatch(fetchPostsIfNeeded(data))
  }
}


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

＆＃13;

Answer 1

我将您的代码修改为我认为可行的代码。我也留下了评论。

class App extends Component {

  state = {
    posts: []
  }

  componentDidMount() {
    // no need to use dispatch again. Your action creators are already bound by 
    // mapDispatchToProps.  Notice also that they come from props
    const { selectedCategory, fetchCategoriesIfNeeded, fetchPostsIfNeeded} = this.props;
    fetchCategoriesIfNeeded(selectedCategory);
    fetchPostsIfNeeded(selectedCategory);
  }

  //... the same
}

function mapStateToProps ( state ) {
  //... the same
}

function mapDispatchToProps (dispatch) {
  // when arguments match, you can pass configuration object, which will 
  // wrap your actions creators with dispatch automatically.
  return {
    orderPost,
    fetchCategoriesIfNeeded,
    fetchPostsIfNeeded,
  }
}

Answer 2

在地图发送中你有fetchCategories / fetchPosts所以你需要像这样调用它们：

componentDidMount() {

            const { dispatch, selectedCategory, fetchCategories, fetchPosts } = this.props
            //Call like this instead of fetchCategoriesIfNeeded/fetchPostsIfneeded
            //dispatch(fetchCategories(selectedCategory))
            //dispatch(fetchPosts(selectedCategory))
        }

你有这个：

function mapDispatchToProps (dispatch) {
  return {
    changeOrder: (data) => dispatch(orderPost(data)),
    fetchCategories: (data) => dispatch(fetchCategoriesIfNeeded(data)),
    fetchPosts: (data) => dispatch(fetchPostsIfNeeded(data))
  }
}

所以你需要从你的道具调用fetchCategories / fetchPosts而不是fetchCatIfneeded / fetchPostsifneeded

Answer 3

你不是。 mapDispatchToProps正是您尝试在组件中执行的操作。您可以调用通过connect提供给组件的方法，而不是调用分派。在你的情况下：

componentDidMount() {
    const { selectedCategory, fetchCategories, fetchPosts} = this.props;
    fetchCategories(selectedCategory);
    fetchPosts(selectedCategory);
}

React Redux - 在连接组件中使用mapDispatchToProps时如何在componentDidMount上调度操作

3 个答案: