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.