webentwicklung-frage-antwort-db.com.de

React Redux - So lösen Sie eine Aktion für componentDidMount aus, wenn Sie mapDispatchToProps in einer verbundenen Komponente verwenden

Ich habe Probleme damit. Ich erstelle eine kleine App mit Redux reagieren.

In dem folgenden Code befindet sich meine app.js-Komponente. Es funktionierte einwandfrei, bis ich versuchte, die Funktion mapDispatchToProps in connect zu verwenden. Das Problem ist, dass ich die Dispatch-Aktion für KomponenteDidMount nicht mehr aufrufen kann. Die Aktionen in componentDidMount und jetzt in mapStateToProps müssen für comoponentDidMount aufgerufen werden. Irgendwelche Hinweise, wie das geht?

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)

4

Ich habe Ihren Code an das angepasst, was meiner Meinung nach funktionieren wird. Ich habe auch Kommentare hinterlassen.

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

In der zu sendenden Karte gibt es fetchCategories/fetchPosts, daher müssen Sie sie wie folgt aufrufen:

componentDidMount() {

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

Du hast das: 

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

Sie müssen also fetchCategories/fetchPosts von Ihren Requisiten aus aufrufen, anstatt fetchCatIfneeded/fetchPostsifneeded

2
Dream_Cap

Sie tun es einfach nicht. MapDispatchToProps führt genau das aus, was Sie in Ihrer Komponente tun möchten. Anstatt einen Versand aufzurufen, rufen Sie die Methode auf, die Ihre Komponente von connect bereitgestellt hat. in Ihrem Fall:

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