CODEWITHSUNDEEP
reactjsredux
Sydney Loteria
Sydney Loteria

Reputation: 10471

Using different state in a nested object in two same component - reactjs

I would like to ask if how to dispatch or catch the data in mapStateToProps if data that I want to get is in a nested state and the identifier would be the this.props.group that is passed in FilmList via the Parent Component.

// Parent Component

<Row>
    <FilmList group="upcoming" groupTitle="Upcoming Movies" />
    <FilmList group="top_rated" groupTitle="Top Rated Movies" />
</Row>



// Child Component
class FilmList extends React.Component {
    constructor(props){
        super(props);
    }
    componentDidMount(){
        this.props.getMovieByGroup(this.props.group);
    }

    renderFilmItem(){
        if(this.props.data){
            var film = this.props.data.upcoming.slice(0,6).map((item) => {
                return <FilmItem key={item.id} film={item} />
            });

            return film;
        }
    }
    render(){
        console.log('new');
        return(
            <div className={styles.filmContainer}>
                <h1>{ this.props.groupTitle }</h1>
                { this.renderFilmItem() }
            </div>
        );
    }
}


function mapStateToProps(state){
    return {
        data: state.film.data.upcoming
    }
}

This is what my state looks like:

enter image description here

This is my reducer:

const INITIAL_STATE = {
    data: {},
    error: {},
};


function processData(initialData, data) {
    let updated = initialData;
    updated[data.group] = data.results;
    return updated;
}

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case GET_FILM_SUCCESS: {
            return Object.assign({}, state.data[action.data.group], {
                data: processData(state.data,action.data)
            });
        }

        case GET_FILM_FAILURE: {
            return { ...state, error: action.data }
        }
    }
    return state;
}

Currently in my mapStateToProps I only access state.film.data.upcoming what I want to achieve is like state.film.data.{this.props.group} somewhere along that code so it will re render the component when "top_rated" or "upcoming" data state change.

Upvotes: 0

Views: 226

Answers (1)

user1736525
user1736525

Reputation: 1129

So if state.file.data.upcoming is working fine, then you should be able to use state.file.data in mapStateToProps then do state.file.data[this.props.group] in your component.

Upvotes: 1

Related Questions