از 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 استفاده میکنم .
بابت راهنماییاتون سپاسگزارم
شما اینجا هم باید از mapDispatchToProp استفاده کنید چرا مستقیما action رو پاس دادید !?
action به تنهای که کار نمیکنه
ممنونم
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)
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟