How can I implement data imported into redux as pagenation?

You are about to apply the Pagination component to the Protein Item component. ProteItem is using Redux to call data from the store.

Usually, when you click Page Nation, you call api to split and expose the data. However, in this case, you want to call all the data to api and store it in the redux, and then split the data in the redux.

How should we make the algorithm?

ps. Pagenation was taken from antd.

• pagination components(pagination function)

const Constain = styled.div`
  color: white;
`

const PagiNation = () => {
  const pageNumbers = [];

  const rootData = useSelector(
    (state: ApplicationState) => state.inventory.data
  );

  const onChange = () => {
    for (let i = 0; i <= Math.ceil(rootData.length / 5); i++){
      pageNumbers.push(i);
      console.log(pageNumbers.push(i))
    }
  }

  return (
    <Constain>
      <Pagination defaultCurrent={1} total={50} responsive={true} defaultPageSize={5} onChange={onChange} pageSize={5} />
    </Constain>
  );
};

export default React.memo(PagiNation);

• ProteinItems components (Screen output)

const ListConstain = styled.li`
  text-align: center;
  position: static;
  padding: 100px;
  background: black;
`

const ExplainFont = styled.h6`
    color: white;
    text-align: center;
`

const ProteinSearchForm = styled.div`
    width:300px;
    height:300px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-150px;
`
const PagiNationConstain = styled.div`
  display: flex;
  justify-content: center;
`

const ProteinItems = () => {

  const [searchKeyword, setSearchKeyword] = useState('');

  const rootData = useSelector(
      (state: ApplicationState) => state.inventory.data
  );
  
  const searchData =  rootData.filter(
    (i) => !searchKeyword || i.name.includes(searchKeyword)
  );
  
  return (
  <div>
    <ProteinSearchForm>
      <Space direction="vertical">
        <Input placeholder="search protein" allowClear={true} onChange={(e) => setSearchKeyword(e.target.value)}
        style={{ 
          width: 400,
          height: 55,
        }} />
      </Space>
    </ProteinSearchForm>
    <ListConstain>
      <Figure style={{ padding: '10px'}}>
        <Figure.Caption>
          <ExplainFont>
            {
              searchData?.map(item => {
                return(
                  <div key={uuid_v4()}>
                    <Figure.Image
                      width={200}
                      height={200}
                      alt="200x200"
                      src={item.image}
                    /><br/><br/>
                    이름: {item.name} <br/>
                    브랜드: {item.brand} <br/>
                    가격: {item.price} <br/>
                    맛: {item.flatness} <br/><br/><br/>
                  </div>
                );
              })
            }
          </ExplainFont>
        </Figure.Caption>
        <PagiNationConstain>
          <PagiNation />
        </PagiNationConstain>
      </Figure>
    </ListConstain>
  </div>
  );
};

export default React.memo(ProteinItems);