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 }

它工作得很好！謝謝！！