sort기능 질문 드립니다

안녕하세요 선생님!

쇼핑몰 프로젝트에서 sort기능을 구현해보려 합니다.

추가한 기능은 "높은 금액순", "낮은 금액순", "인기순"  << 이렇게 3가지의 sort기능을 추가하였으며,

shoes데이터는 redux로 index.js파일에서 중앙관리 하는 방식으로 구현중에 있습니다.

예를들어, "높은금액순"버튼을 누르면 action에 sort기능을 정의하여 메인화면의 상품이 해당 기능대로 정렬되도록 구현하였습니다.

아래 코드 첨부드립니다.

// product.js 페이지

const Product = (props) => {
    let history = useHistory();

    return (
        <>
        <div className="sort_product">             

             <p onClick={ () => {props.dispatch({type: 'sortHighPrice'})} }>높은금액순</p>     // '높은금액순' 버튼추가
              <p onClick={ () => {props.dispatch({type: 'sortLowPrice'})} }> 낮은금액순</p>      // '낮은금액순' 버튼추가
             <p onClick={ () => {props.dispatch({type: 'sortPopularPrice'})} }> 인기순</p>      // '인기순' 버튼추가
        

        <div className="row">             
            {
                props.state.map((a, i) => {
                    return (
                        <div className="col-md-4" key={i} onClick={()=>{ history.push('/detail/' + props.state[i].id) }}>
                            <img src={"https://codingapple1.github.io/shop/shoes" + (i + 1) + ".jpg"} width="100%" />
                            <h4> { props.state[i].title } </h4>
                            <p> {props.state[i].content} & {props.state[i].price} </p>
                            <p> 재고: { props.lestState[i] }</p>

                       </div> 

                    )
                })
            }

            <button className="btn btn-primary moreBtn" onClick={() => {
                axios.get('https://codingapple1.github.io/shop/data2.json')
                .then((result) => {
                    props.dispatch({ type: 'addList', payload: result.data })
                })
                .catch(() => {
                    console.log('failure')
                  })
            }} >더보기
            </>
    );
};

function shoeProps(state) {
    return {
        state: state.reducer,
        lestState: state.reducer2,
        cartState: state.reducer3
    }
}
export default connect(shoeProps)(Product);

그리고 위 버튼의 dispatch를 전달하는 액션은 아래 index.js파일에 정의하였습니다.

// index.js

let shoeState = Data;

function reducer(state=shoeState, action) {
  if (action.type === 'addList') {
    let setShoes = [...state, ...action.payload]
    return setShoes
  }
  else if (action.type === 'sortHighPrice') {            // 높은가격순 sort기능
    let copy = [...state];
    copy.sort(function (a, b) {
      return b.price - a.price;
    });
    return copy
  }
  else if (action.type === 'sortLowPrice') {            // 낮은가격순 sort기능
    let copy = [...state];
    copy.sort(function (a, b) {
      return a.price - b.price;
    }); 
    return copy
  }
  else if (action.type === 'sortPopularPrice') {       // 인기순 sort기능
    let copy = [...state];
    copy.sort(function (a, b) {
      return a.id - b.id;
    });
    return copy
  }
  else {
    return state
  }
}

그런데 메인페이지에서 해당 버튼을 누르면 sort기능은 잘 적용되나, "높은금액순"버튼을 누르면 금액부분만 sort기능이 적용되서

이미지나 그 외 다른 정보들은 그대로 있고 "가격 데이터"만 sort기능이 적용됩니다 ㅠㅠ 

다른 버튼도 마찬가지이구요!

이를 해결하기 위해 어떤 코드를 수정해야할지 고민하였는데, index.js의 reducer를 정의한 부분에서

return 값이 price를 기준으로(인기순의 경우 id를 기준으로) 정렬을 정의하였기에 딱 그부분만 재배치되는것같습니다.

그러나 해당 기준으로 정렬할 때 전체(이미지, 상품명, 재고정보 등 전체 하나의 묶음)가 함께 sort되도록 하는 방법을 도무지 모르겠어서 질문 드립니다..

어떻게 수정하면 '금액별 기준'으로 전체 데이터묶음(이미지, 상품명, 재고정보 등 반복문 안에 들어있는 하나의 데이터정보)이 

한꺼번에 정렬 재배치 될 수 있을까요?