Redux - Fetch data, but render in another component

user_9677360 0
Viewed 414

I'm currently fetching data in Component1, then dispatching an action to update the store with the response. The data can be seen in Component2 in this.props, but how can I render it when the response is returned? I need a way to reload the component when the data comes back.

Initially I had a series of functions run in componentDidMount but those are all executed before the data is returned to the Redux store from Component1. Is there some sort of async/await style between components?

class Component1 extends React.Component {
    componentDidMount() {
        this.retrieveData()
    }

    retrieveData = async () => {
        let res = await axios.get('url')
        updateParam(res.data) // Redux action creator
    }
}

class Component2 extends React.Component {
    componentDidMount() {
       this.sortData()
    }

    sortData = props => {
        const { param } = this.props
        let result = param.sort((a,b) => a - b)
    }
}

mapStateToProps = state => {
    return { param: state.param }
}

connect(mapStateToProps)(Component2)

In Component2, this.props is undefined initially because the data has not yet returned. By the time it is returned, the component will not rerender despite this.props being populated with data.

redux-thunk redux reactjs
1 Answers

Assuming updateParam action creator is correctly wrapped in call to dispatch in mapDispatchToProps in the connect HOC AND properly accessed from props in Component1, then I suggest checking/comparing props with previous props in componentDidUpdate and calling sortData if specifically the param prop value updated.

class Component2 extends React.Component {
    componentDidMount() {
       this.sortData()
    }

    componentDidUpdate(prevProps) {
      const { param } = this.props;
      if (prevProps.param !== param) { // <-- if param prop updated, sort
        this.sortData();
      }
    }

    sortData = () => {
        const { param } = this.props
        let result = param.sort((a, b) => a - b));
        // do something with result
    }
}

mapStateToProps = state => ({
  param: state.param,
});

connect(mapStateToProps)(Component2);

EDIT

Given component code from repository

let appointmentDates: object = {};
class Appointments extends React.Component<ApptProps> {
    componentDidUpdate(prevProps: any) {
        if (prevProps.apptList !== this.props.apptList) {
            appointmentDates = {};
            this.setAppointmentDates();
            this.sortAppointmentsByDate();
            this.forceUpdate();
        }
    }

    setAppointmentDates = () => {
        const { date } = this.props;
        for (let i = 0; i < 5; i++) {
            const d = new Date(
                new Date(date).setDate(new Date(date).getDate() + i)
            );
            let month = new Date(d).toLocaleString("default", {
                month: "long"
            });
            let dateOfMonth = new Date(d).getDate();
            let dayOfWeek = new Date(d).toLocaleString("default", {
                weekday: "short"
            });
            // @ts-ignore
            appointmentDates[dayOfWeek + ". " + month + " " + dateOfMonth] = [];
        }
    };

    sortAppointmentsByDate = () => {
        const { apptList } = this.props;
        let dates: string[] = [];
        dates = Object.keys(appointmentDates);
        apptList.map((appt: AppointmentQuery) => {
            return dates.map(date => {
                if (
                    new Date(appt.appointmentTime).getDate().toString() ===
                    // @ts-ignore
                    date.match(/\d+/)[0]
                ) {
                    // @ts-ignore
                    appointmentDates[date].push(appt);
                }
                return null;
            });
        });
    };

    render() {
        let list: any = appointmentDates;

        return (
            <section id="appointmentContainer">
                {Object.keys(appointmentDates).map(date => {
                    return (
                        <div className="appointmentDateColumn" key={date}>
                            <span className="appointmentDate">{date}</span>
                            {list[date].map(
                                (apptInfo: AppointmentQuery, i: number) => {
                                    return (
                                        <AppointmentCard
                                            key={i}
                                            apptInfo={apptInfo}
                                        />
                                    );
                                }
                            )}
                        </div>
                    );
                })}
            </section>
        );
    }
}

appointmentDates should really be a local component state object, then when you update it in a lifecycle function react will correctly rerender and you won't need to force anything. OR since you aren't doing anything other than computing formatted data to render, Appointments should just call setAppointmentDates and sortAppointmentsByDate in the render function.

user_86908570
Related