React-Redux: visualize elements array

Question

I'm learning to use react and redux.

So I have a little bit of questions:

I have structured in this way:

reducers.js

const initialState = {
    meetings: []
}

export const reducer = (state = initialState, action) => {
    switch(action.type){
        case 'MEETINGS_LIST':
            return [...state.meetings, action.meetings];
        default: 
            return state;
    }    
}
export default reducer;

action.js

export const meetingsList = (meeting) => {
    return(dispatch) => {
        fetch(`https://jsonplaceholder.typicode.com/users`)
        .then(
            res => res.json(),
            error => console.log('An error occurred.', error))
        .then(meetings => {
            dispatch({
                type: 'MEETINGS_LIST',
                meetings: meetings
            })
        })
    }
}

It's right to do the fetch in the actions.js? Or I should do in the reducers?

Anyway my problem is in main page,

class MeetingsList extends Component {
    constructor(props){
        super(props);
        this.state = {}
    }
componentDidMount(){
    this.props.meetingsList();
}


render(){
    console.log(this.props.meetings)
    return(
        <div>

        </div>
    )
}
}

function mapStateToProps(state){
    return {meetings: state}
};

function mapDdispatchToProps(dispatch){
    return {
        meetingsList: (meetings) => dispatch(meetingsList(meetings))
    }
}

export default connect(mapStateToProps, mapDdispatchToProps)(MeetingsList)

I would like to print the contents of the props on the screen. It is an array [10], I had thought of using a map to be able to print every single array, but every time I try it tells me that it is impossible to use the map of an undefined. How can I do?

Thanks

Alserda · Accepted Answer · 2020-04-08 08:21:24Z

1

A few things:

You're defining the initialState as an object. On the MEETINGS_LIST type you're returning an array.
After a second dispatch of MEETINGS_LIST, you're spreading state.meetings which is undefined (because state isn't an object anymore)
You're dispatching { meetings: meetings } where meetings is an array (because you're retrieving a list of users at this moment). But you're not spreading that array in your MEETINGS_LIST handler.

So:

Change (state = initialState) to (state = []).
Change your 'MEETINGS_LIST' handler to return [...state, ...action.meetings];
Now you can loop over your meetings:

const elements = this.props.meetings.map((meeting) => <li key={meeting.id}>{meeting.title}</li>);

return <ul>{elements}</ul>

edited Apr 8, 2020 at 8:21

answered Apr 8, 2020 at 8:04

Alserda

4,8041 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jack23 Over a year ago

Thank you for your reply! You help me a lot! Only a problem now I receive this error: state.meetings is not iterable in the reducers.js. Maybe because I have done export const reducer = (state = [] , action) => { And I don't use the initialState = { meetings: [] } ??

Alserda Over a year ago

You're right. It should be [...state, ...action.meetings], because the 'state' is now an array. I updated my answer

Jack23 Over a year ago

Ok after your edit I print the dot in the screen xD Just another question, the initialState = { meetings: [] } is declared but not used. How the reducer understand to use meetings: [] ?

Alserda Over a year ago

@Jack23 then you would have to define your state as an object and use the properties of that object everywhere. You should view the redux documentation for that, there are some examples

Collectives™ on Stack Overflow

React-Redux: visualize elements array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related