reactjs – React Redux – 在连接组件中使用mapDispatchToProps

发布时间：2020-12-15 16:21:13 所属栏目：百科来源：网络整理

导读：我遇到了这个问题.我正在用react redux创建一个小应用程序. 在下面的代码中是我的app.js组件.它工作正常,直到我尝试在connect中使用mapDispatchToProps函数.问题是我无法再调用componentDidMount上的调度操作.需要在comoponentDidMount上调用componentDidMou

我遇到了这个问题.我正在用react redux创建一个小应用程序.

在下面的代码中是我的app.js组件.它工作正常,直到我尝试在connect中使用mapDispatchToProps函数.问题是我无法再调用componentDidMount上的调度操作.需要在comoponentDidMount上调用componentDidMount中现在位于mapStateToProps上的操作.有关如何做到的任何线索？

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)

解决方法

我将您的代码修改为我认为可行的代码.我也留下了评论.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!