7
votes

Reagez ReDux - Comment envoyer une action sur le composantDidmount lors de l'utilisation de MapDisPatchToprops dans un composant connecté

J'ai des problèmes avec cela. Je crée une petite application avec React Redux.

Dans le code ci-dessous est mon composant APP.JS. Cela fonctionnait bien jusqu'à ce que j'essaye d'utiliser la fonction MapDisPatchToproprops à l'intérieur de la connexion. Le problème est que je ne peux plus invoquer l'action d'expédition sur le composantDidMount. Les actions qui étaient en composanteDidMount et qui sont maintenant sur MapStationtoProps doivent être appelées au comoponentdidmount. Toute indices dans la façon de faire ça? P>

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)

reactjs react-redux

0 commentaires

3 Réponses :

5
votes

sur la carte pour expédier Vous avez des articles de fetchCategories / fetchpost, donc vous devez donc les appeler comme ceci: xxx

vous avez ceci: xxx < P> Vous devez donc appeler FetchCategories / Fetetchposts à partir de vos accessoires au lieu de fetchCatifNeeded / fetchpostsIfned

0 commentaires

8
votes

J'ai modifié votre code à ce que je pense fonctionnera. J'ai aussi laissé des commentaires. XXX

0 commentaires

1
votes

Vous ne le faites pas. Le MapDispatchToprops fait exactement ce que vous essayez de faire dans votre composant. Au lieu d'appeler une expédition, vous appelez la méthode fournie à votre composant par Connect. Dans votre cas:

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

0 commentaires