Handle pagination in recompose

[felire]

Pagination Actions

You will have to write actions with the following params (only if you want to build a paginationAction, if you don't want that, write actions like always):

• paginationAction (boolean)
• reducerName (The name of the reducer you are going to handle this) (use only if paginationAction is true)
• refresh (Param that probably you receive in your action, you are going to set it to false when you want to have next pages. By default is setted to true)
• successSelector (This last param have to transform the response and return the following object)

{
  list,
  meta: {
  totalPages,
  currentPage,
  totalItems // This last item is not necessary but maybe you will need it for something specific.
  }
}

Your service will receive an object with the nextPage prop.

Example of using:

//reducer.js

const stateDescription = {
  tickets: null
};

const initialState = completeState(stateDescription);

const reducerDescription = {
  paginationActions: [actions.GET_TICKETS]
};

//actions.js

const formatPagination = response => ({
  list: response.data?.data,
  meta: {
    totalPages: response.data?.meta?.total_pages,
    currentPage: response.data?.meta?.current_page,
    totalItems: response.data?.meta?.total
  }
});

export const actionCreators = {
  getTickets: (newPagination = true) => ({
    type: actions.GET_TICKETS,
    target: ticketsTarget,
    paginationAction: true,
    refresh: newPagination,
    reducerName: "tickets",
    service: TicketService.getTickets,
    successSelector: response => formatPagination(response)
  })
};

//service.js
const getTickets = ({ nextPage }) => api.get(`/tickets?page=${nextPage}`);

If you want to send more info to your service, your payload will have to return an object, not a single value. (Only if you are using paginationActions)

[marianozicavo]

Delete this file because we use npm

[marianozicavo]

I think you can call onSuccess directly here

[marianozicavo]

Suggested change

	[`${action.target}`]:
	[action.target]:

[marianozicavo]

I think you need to modify completeState as well, in order to add all these new targets

[marianozicavo]

Mmm I don't understand this part

[marianozicavo]

Having to specify the reducer you are in doesn't look good to me.

[marianozicavo]

Hola @felire !
Está por salir la version 3.0 de redux-recompose y estamos revisando el estado los PRs abiertos.

---

Me parece muy copada la idea. Me hace acordar un poco a (esto)[https://react-query.tanstack.com/guides/paginated-queries].
Me entraron dudas viendolo:

• esto seria solo para separar la metadata del paginado de la data de la pagina o esta haciendo algo mas?
• a lo mejor se pueden usar los customCompleters de completeState, completeTypes y completeReducer para no tener que introducir lógica a la basethunkaction.
• habria que mover la documentacion a la nueva carpeta de recipes poniendo algunos ejemplos y si es posible una demo de como se usa

De todas formas voy a pedirle a los otros chicos de react-native que lo miren para que den una opinión, ya que ellos son los que la usan en el día a día.

---

La forma de poner "al día" este PR si querés hacerlo es

• cambiar la base branch del PR por la branch 3.0
• solucionar conflictos y comentarios

[mvbattan]

Needed indentation

[mvbattan]

This name is a little bit confusing. Would you like to name it using the positive case ?

[felire]

@marianozicavo I won't have time to complete this the following weeks and months. If anyone from wolox want to complete feel free fo fork my branch and work from there.