description

مشکل نداشتن dispatch و اجرا نشدن آن

- 3 ماه پیش
توسط احسان آپدیت شد
احسان ( 231 تجربه )
3 ماه پیش

از 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 استفاده میکنم .

بابت راهنماییاتون سپاسگزارم

حسام موسوی ( 44199 تجربه )
3 ماه پیش

شما اینجا هم باید از mapDispatchToProp استفاده کنید چرا مستقیما action رو پاس دادید !?
action به تنهای که کار نمیکنه

احسان ( 231 تجربه )
3 ماه پیش

ممنونم
mapDispatchToProps را یک بار امتحان کردم . و جواب نگرفتم . ولی دوباره امتحانش میکنم و اگر درست شده بود حتما اطلاع میدم . و اگر مشکلی بود مطرح میکنم و ممنون میشم دوباره راهنماییم کنید . سپاسگزارم

احسان ( 231 تجربه )
3 ماه پیش

در این کد 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)
برای ارسال پاسخ باید وارد سایت شوید