React Redux only displaying one element

Question

I'm new to React and am having some trouble getting it to work.

I have a react class that puts a bunch of JSON in the store as an object, a PushNotification with two elements: pushId and count. So, the store should have a list of PushNotifications.

However, when I try and display that information to the screen, it only outputs one of them.

My React code is:

socket.onmessage = function(event) {
    console.log("Received message" + event.data.toString());
    store.dispatch(receivedPushNotification(event.data));
};


var App = React.createClass({
    render: function () {
        var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) {
            var percentage = (notification.count / 50) * 100;
            return (
                <div className="row" key={notification.pushid}>
                    <div className="col-sm-12">
                        <Card>
                            <h1 className="marB15">{notification.pushid}</h1>
                            <div className="clearfix">
                                <div className="progress progress-striped active marB10">
                                    <div className="progress-bar" style={{'width': percentage + '%'}}></div>
                                </div>
                                <div className="pull-right">
                                    <p>Total: {notification.count}</p>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            )
        });
    }
});

My Reducer is:

var pushNotificationDefaultState = {};


var pushNotificationReducer = function(state, action) {
    switch(action.type) {
        case 'RECEIVED_PUSH_NOTIFICATION':
            var obj = JSON.parse(action.PushNotification);
            console.log(obj.pushid);
            console.log(obj.count);
            return obj;
        default:
            if (typeof state === 'undefined') {
                return pushNotificationDefaultState;
            }

            return state;
    }
};

module.exports = Redux.combineReducers({
    pushNotifications: pushNotificationReducer
});

Thanks in advance,

1ven · Accepted Answer · 2016-06-28 17:52:42Z

The problem is, that you are storing only one notification in redux state.
Instead of this, you should store an array of them.

// Using an emty array as default state, instead of object.
var pushNotificationDefaultState = [];

var pushNotificationReducer = function(state, action) {
    switch(action.type) {
        case 'RECEIVED_PUSH_NOTIFICATION':
            var obj = JSON.parse(action.PushNotification);
            // Returning new array, which contains previous state and new notification.
            return [].concat(state, [obj]);
        default:
            if (typeof state === 'undefined') {
                return pushNotificationDefaultState;
            }

            return state;
    }
};

module.exports = Redux.combineReducers({
    pushNotifications: pushNotificationReducer
});

Also, you are not returning notifications elements from render function:

socket.onmessage = function(event) {
    console.log("Received message" + event.data.toString());
    store.dispatch(receivedPushNotification(event.data));
};


var App = React.createClass({
    render: function () {
        // To render notifications, return it array from render function
        return _.map(this.props.pushNotifications, function(value, key, notification) {
            var percentage = (notification.count / 50) * 100;
            return (
                <div className="row" key={notification.pushid}>
                    <div className="col-sm-12">
                        <Card>
                            <h1 className="marB15">{notification.pushid}</h1>
                            <div className="clearfix">
                                <div className="progress progress-striped active marB10">
                                    <div className="progress-bar" style={{'width': percentage + '%'}}></div>
                                </div>
                                <div className="pull-right">
                                    <p>Total: {notification.count}</p>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            )
        });
    }
});

Kokovin Vladislav · Accepted Answer · 2016-06-28 18:11:39Z

0

add return statement in your render, after map

return (<div>{pushNotifications}</div>);

in reducer you should add new notif in array

case 'RECEIVED_PUSH_NOTIFICATION':
    var notif = JSON.parse(action.PushNotification);

    return [...state, notif ];

edited Jun 28, 2016 at 18:11

answered Jun 28, 2016 at 17:35

Kokovin Vladislav

10.4k5 gold badges41 silver badges36 bronze badges

Collectives™ on Stack Overflow

React Redux only displaying one element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related