React Redux - Как отправить действие на componentDidMount при использовании mapDispatchToProps в подключенном компоненте

У меня проблемы с этим. Я создаю небольшое приложение с реактивной редукцией.

В приведенном ниже коде находится мой компонент app.js. Он работал нормально, пока я не попытался использовать функцию mapDispatchToProps внутри connect. Проблема в том, что я больше не могу ссылаться на действие диспетчера на componentDidMount. Действия, которые были в компонентеDidMount и которые теперь находятся на 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 {

		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}">)}
	 />

	 
	 
	 </tablebody></route></headernavigation></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)
3 ответа

Я изменил ваш код на то, что, как я думаю, будет работать. Я также оставил комментарии.

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,
 }
}


На карте для отправки у вас есть 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


Вы просто этого не делаете. MapDispatchToProps делает именно то, что вы пытаетесь сделать в своем компоненте. Вместо того, чтобы вызывать отправку, вы вызываете метод, который был предоставлен вашему компоненту посредством соединения. в твоем случае:

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

licensed under cc by-sa 3.0 with attribution.