web-dev-qa-db-fra.com

React Redux - Comment distribuer une action sur composantDidMount lors de l'utilisation de mapDispatchToProps dans un composant connecté

J'ai des problèmes avec ça. Je crée une petite application avec react redux.

Dans le code ci-dessous se trouve mon composant app.js. Cela fonctionnait bien jusqu'à ce que j'essaie d'utiliser la fonction mapDispatchToProps dans connect. Le problème est que je ne peux plus invoquer l'action de répartition sur composantDidMount. Les actions qui se trouvaient dans composantDidMount et qui sont maintenant sur mapStateToProps doivent être appelées sur comoponentDidMount. Des indices sur comment faire ça?

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)

reactjsreact-redux
4
Gonzalo Ortellado

J'ai modifié votre code pour que je pense que cela fonctionnera. J'ai aussi laissé des commentaires.

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,
  }
}
4
Tomasz Mularczyk

Dans map to dispatch, vous avez fetchCategories/fetchPosts, vous devez donc les appeler comme suit:

componentDidMount() {

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

Tu as ceci: 

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

Vous devez donc appeler fetchCategories/fetchPosts depuis vos accessoires au lieu de fetchCatIfneeded/fetchPostsifneeded

2
Dream_Cap

Tu ne le fais pas. MapDispatchToProps fait exactement ce que vous essayez de faire dans votre composant. Au lieu d'appeler un dispatch, vous appelez la méthode fournie à votre composant par connect. dans ton cas:

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