از redux در پروژه ای که با react ssr نوشته شده استفاده کردم . مشکلی در اجرای dispatch دارم ممنون میشم راهنماییم کنید.
import React , { Component } from 'react';
import { Col } from "react-bootstrap";
import { connect } from 'react-redux';
import Home from "../components/Home";
import { fetchHome, asideArticle } from "../actions/index";
class HomeContainer extends Component {
constructor(props) {
super(props);
console.log('constructor => this.props.dispatch => Result => ', this.props.dispatch); // dispatch is undefined
}
componentDidMount() {
this.props.fetchHome();
}
render() {
const { homeData, article } = this.props;
return (
<Col>
<Home homeData={homeData} asideArticle={(articleId) => asideArticle(articleId) } />
</Col>
);
}
}
const mapStateToProps = state => ({
homeData : state.home,
article: state
});
function loadData(store){
return store.dispatch(fetchHome());
}
export default {
loadData,
component: connect(mapStateToProps, { fetchHome, asideArticle })(HomeContainer)
}
وقتی که روی یک کارتی کلیک میشه . من id اون کارت رو ارسال میکنم به HomeContainer و این id رو به asideArticle که یک action هستش پاس میدم . بنابراین انتظار هست که اکشن اجرا بشه . اما لاگر گرفتم و متوجه شدم اصلا فانکشن dispatch رو ندارم .
نکته :
من از react ssr استفاده میکنم . بنابراین هم از staticRouter دارم و هم از browserRouter استفاده میکنم .
بابت راهنماییاتون سپاسگزارم
ممنونم
mapDispatchToProps را یک بار امتحان کردم . و جواب نگرفتم . ولی دوباره امتحانش میکنم و اگر درست شده بود حتما اطلاع میدم . و اگر مشکلی بود مطرح میکنم و ممنون میشم دوباره راهنماییم کنید . سپاسگزارم
شاید پاسخ شما همینجا باشد
در این کد asideArticle به عنوان یک action به connect پاس داده شده. و بعد از render شدن component . این action بصورت یک props در دسترس خواهد بود .
نکته : this.props.dispatch هم نمیتوانمیم در این کد استفاده کنیم به این دلیل که اصلا پراپسی با نام dispatch وجود ندارد . در عوض آن فانکشن ها رو داریم به عنوان props که آن ها دارای dispatch هست. بنابراین راه اجرایی کردن کد شبیه به کد زیر میباشد :
<Home homeData={homeData} asideArticle={(articleId) => this.props.asideArticle(articleId) } />
همانطور که گفتم action به صورت یک props تبدیل شده که از طریق props استفاده کردم .
this.props.actionName(id)