CODEWITHSUNDEEP
javascriptecmascript-6assign
BK52
BK52

Reputation: 934

Merge data and create array with Object.assign()

I'm trying React-Redux exercise. I have an array in global state. I'm print it with component. Then I want to add item this array.

reducer.js

 export var initialState={
    ProductList:[
        {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
        {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
        {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
        {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
        {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
        {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
    ],
    title:"Product List"
    }
    export default function reducer(state=initialState, action){
        switch(action.type){
           case 'CREATE':
                return Object.assign({}, state, { ProductList: action.payload.__item });
           case 'UPDATE_TITLE':
                return Object.assign({}, state, { title: action.payload.__title });
           default:
                return state;
        }
    }

action.js

import {store} from '../index'

export function RemoveItem(id){
    store.dispatch({
        type:'CREATE',
        payload:{
          __item: {category: "Electronics", price: "$299.99", stocked: true, name: "Nexus 8"}
        }
    });
}

export function UpdateTitle(){
    store.dispatch({
        type:'UPDATE_TITLE',
        payload:{
           __title:"Updated Title"
        }
    });
}

ProductComponent.js

import React from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import { withRouter } from 'react-router-dom';
import {CreateItem,UpdateTitle} from "../ReduxTest/action";


 class ProductComponent extends React.Component{
    constructor(props){
        super(props)
    }

    createItem=()=>{
        CreateItem();
    }

    updateTitle=()=>{
        UpdateTitle();
    }

    render(){
            console.log(this.props)
            const _title=<h3>{this.props.Title}</h3>
            const _list=this.props.List.map((item)=>
                (
                    <div>{item.name}</div>
                )           

        )
        return (
            <div>
                {_title}
                {_list}
                <button onClick={this.createItem}>Create</button>
                <button onClick={this.updateTitle}>Title</button>
            </div>
        )
    }
}

const mapStateToProps = (state,ownProps)=>({
    List:state.reducer1.ProductList,
    Title:state.reducer1.title
})

export default connect(mapStateToProps)(ProductComponent);

In the ProductComponent render section I write to console it's props. First it gives

{List: Array(6), Title: "Product List", dispatch: ƒ}

List: Array(6)
0: {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}
1: {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}
2: {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"}
3: {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"}
4: {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}
    5: {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
length: 6
__proto__: Array(0)
Title: "Product List"

and no problem. I show list successfully. After clicked create button Object.assign({}, state, { ProductList: action.payload.__item }); then it gives

{List: {…}, Title: "Product List", dispatch: ƒ}

List:
category: "Electronics"
price: "$299.99"
stocked: true
name: "Nexus 8"
__proto__: Object
Title: "Product List"

It turned me an object which I wanted to added. I couldn't merge this item successfully. How can I add this item to array?

Upvotes: 0

Views: 110

Answers (1)

Rob Brander
Rob Brander

Reputation: 3781

ProductList is an array, so you must treat as one. Right now you're just replacing the array with an object.

try:

return Object.assign({}, state, { ProductList: state.ProductList.concat(action.payload.__item) });

Upvotes: 2

Related Questions