I have obtained a json data and want to merge the same ones together. For example, there are two stores in Pudong New area in the picture, and all the stores are shown under the area name.

here is my code:

import React,{Component} from "react"
import "./Cinemalist.css"
import {connect} from "react-redux"
import axios from "axios"

class Cinemalist extends Component{

    componentDidMount(){
        this.props.getCinemalist()
    }

    render(){
        return(
            <div id="cinemalist">
                <ul className="cinemalist-ul">
                    {
                        this.props.mylist.map(item=>
                            <li key={item.id}>
                                <p className="title">{item.district.name}
 
                                <div className="cinema">
                                    <h4 className="cinema-name">{item.name}</h4>
                                    <p className="cinema-add">{item.address}

                                </div>
                            </li>
                        )
                    }
                </ul>        
            </div>
        )
    }
}

export default connect(
    (state)=>{
        return {
            mylist:state.cinemalistReducer
        }
    },{
        getCinemalist:()=>{
            return (dispatch)=>{
                axios.get("/v4/api/cinema?__t=1529633184561").then(res=>{
                    console.log(res.data);
                    dispatch({
                        type:"getcinemaData",
                        payload:res.data.data.cinemas
                    })
                })
            }
        }
    }
)(Cinemalist)

data uses deep replication:

var cinemalist = (prevstate=[],data={})=>{
    let {type,payload} = data;

    switch(type){
        case "getcinemaData":
            return [...prevstate,...payload];
        default :
            return prevstate;
    }
    return prevstate;
}

export default cinemalist