React Redux - 在连接组件中使用mapDispatchToProps时，如何在componentDidMount上分派动作

Question

我遇到问题。我正在创建一个反应减少的小应用程序。

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

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 { 
 

 
\t \t state = { 
 
\t \t \t posts: [] 
 
\t \t } 
 

 
\t \t componentDidMount() { 
 
\t \t \t const { dispatch, selectedCategory, fetchCategories, fetchPosts} = this.props 
 
    \t \t //dispatch(fetchCategoriesIfNeeded(selectedCategory)) 
 
    \t \t //dispatch(fetchPostsIfNeeded(selectedCategory)) 
 
\t \t } 
 

 
\t \t orderByScoreAsc = (posts) => { 
 

 
\t  return posts.sort(sortAsc('voteScore')) 
 

 
\t  } 
 

 
\t \t orderByScoreDesc = (posts) => { 
 

 
\t  return posts.sort(sortDesc('voteScore')) 
 

 
\t  } 
 

 
\t \t render() { 
 

 
\t \t const { navCategories, posts } = this.props 
 

 
\t  return (
 
\t  <div> 
 
\t   <HeaderNavigation navCategories = {navCategories} /> 
 

 
\t   <Route exact path="/" render={()=>(
 
\t   <TableBody 
 
\t   \t showingPosts={posts} 
 
\t   />)} 
 
\t   /> 
 

 
\t   
 
\t   
 
\t  </div> 
 
\t ); 
 
\t } 
 
} 
 

 
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)

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完成了你正在试图在你的组件中做的事情。您不必调用调度，而是调用通过连接提供给组件的方法。在你的情况下：

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

Answer 4

感谢您的回答，你是对的。我改变了我的代码：

componentDidMount() { 
 
\t \t \t const { dispatch, selectedCategory, fetchCategoriesProp, fetchPostsProp} = this.props 
 
\t \t \t this.props.fetchCategoriesProp(selectedCategory) 
 
\t \t \t this.props.fetchPostsProp(selectedCategory) 
 
\t \t }

它工作得很好！谢谢！！