상품목록을 store로 빼다가 생긴 오류

[오선화]

안녕하세요 선생님
처음에 data.js파일로 넣은 상품목록과 axios로 불러온 목록을 store.js로 따로 빼다가
오류가 생겨서 질문 드립니다.

Main.js

import { Container, Row, Button } from "react-bootstrap";
import Shoes from "../components/Shoes";

import { useState } from "react";
import { useDispatch } from "react-redux";
import { addMoreItem } from "../store/productList";

const Main = ({ shoes, loading }) => { // App.js에서 useSelector로 store.js의 데이터를 가져온 후 props로 전달
    const [more, setMore] = useState(0);
    const dispatch = useDispatch();

    return (
        <>
            <div
                className="main-bg"
                style={{
                    background: `url(${process.env.PUBLIC_URL}'/images/bg.png') center center no-repeat`,
                    backgroundSize: "cover",
                }}
            ></div>

            <Container>
                <Row md={3}>
                    {shoes.map((item, idx) => (
                        <Shoes key={item.id} id={item.id} title={item.title} price={item.price} content={item.content} idx={idx} />
                    ))}
                </Row>
                <p
                    style={{
                        textAlign: "center",
                        marginTop: "30px",
                        marginBottom: "50px",
                    }}
                >
                    {more == 2 ? (
                        <span>No more products</span>
                    ) : loading ? (
                        <span>loading...</span>
                    ) : (
                        <Button
                            variant="light"
                            onClick={() => {
                                dispatch(addMoreItem(more));
                                setMore(more + 1);
                            }}
                        >
                            More
                        </Button>
                    )}
                </p>
            </Container>
        </>
    );
};

export default Main;

/store/productList.js

import { createSlice } from "@reduxjs/toolkit";
import data from "../data";
import axios from "axios";

const productList = createSlice({
    name: "list",
    initialState: { data, isLoading: false }, // isLoading: Main.js의 로딩 useState 대신 삽입
    reducers: {
        addMoreItem(state, action) { // 더보기 눌렀을 때 실행
            state.isLoading = true;
            setTimeout(() => {
                axios
                    .get(`https://codingapple1.github.io/shop/data${action.payload + 2}.json`)
                    .then((result) => {
                        state.data = [...state.data, ...result.data];
                        state.isLoading = false;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }, 1000);
        },
    },
});

export const { addMoreItem } = productList.actions;

export default productList;

--------------------------------------
더보기 버튼 눌렀을 때 에러
TypeError: Cannot perform 'get' on a proxy that has been revoked


확인부탁드립니다ㅠㅠ
감사합니다

[codingapple]

리듀서안에선 ajax요청못해서 useEffect안에서 ajax요청하고 그걸 redux store에 저장하라고 코드짭시다

[글쓴이]

글