javascript - Hur kan jag implementera data som importeras till redux som paginering?

Du är på väg att applicera Pagination-komponenten på Protein Item-komponenten. ProteItem använder Redux för att hämta data från lagret.

Vanligtvis, när du klickar på Page Nation, kallar du på API:et för att dela upp och exponera datan. Men i det här fallet vill du kalla på allt data till API:et och lagra det i Redux, och sedan dela upp datan i Redux.

Hur ska vi göra algoritmen?

ps. Paginering togs från antd.

• sidnumreringskomponenter (sidnummerfunktion)

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 komponenter (Skärmutdata)

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);