I am building my own using React library for the user interface. What I like about react you don’t have to use it in a SPA (single page application). SaaS application In my SaaS application, I created several independent React applications. One for the dashboard, one for product management, one repositories connection, and one for payment. There are two fundamental parts in every react application I build: The to manage the state Redux The to manage the async calls. Redux Observable For dropdown select on the user interface, I like the . It’s beautiful and has a lot of features. React Select But, React Select doesn’t support async pagination The “React Select” is: “A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.” I load the select box with the list of items I get from the API. The concrete API is GitHub which return a limited number of user repository branches. If the repository has a lot of branches, we have to make several API calls to get the full list. The solution is to make another API call only if the user scrolls at the bottom of the list. If a user doesn’t open the select box or not scroll to the end, we will not make the unnecessary API call. The React Select doesn’t offer this out of the box, but there are options: Write your pagination implementation or to use fork which is a wrapper for that supports pagination on a menu scroll. React Select Async Paginate react-select The react select async paginate library seems like an actively maintained one, and for that reason, I decided to try it out. Unfortunately, it doesn’t fit well with Redux Observable. In "Async Paginate" library, we have to pass the async method which will return options. I prefer to dispatch an action and make ajax call with middleware. I like to keep my async calls in one place, in an “epic” folder where epic Redux Observable lives. Redux Observable is … what? The is a middleware for that allows you to filter and map action using operators. It can handle cancellation and other side effects. In terms of how code is structured all async calls will be stored into one location what makes the code cleaner and organized. redux observable Redux RxJS Concepts related to Redux Observable and RxJs can be a bit harder to grasp, so give yourself time to read, watch some courses, and to practice. Since the React async paginate library does not fit well with Redux Observable, I decided to write my pagination implementation using Redux, and Redux Observable. I liked the “Redux Observable” approach much more than using fork. The reason is with “Redux Observable” the ajax API calls are separated in one folder. No need to search through the call to find where API calls are. React Select Async Paginate The Code And finally, let’s see some code. Actions are simple functions that return action type and related data we need to execute that action. We created an action for fetching repository branches from the GitHub API, and one more action to dispatch when fetching data is done with success. FETCH_MORE_BRANCHES = ; SUCCESS_FETCH_BRANCHES = ; { { : FETCH_MORE_BRANCHES, identityId, nextPage }; } { { : SUCCESS_FETCH_BRANCHES, branches, nextPage }; } export const 'FETCH_MORE_BRANCHES' export const 'SUCCESS_FETCH_BRANCHES' export ( ) function fetchMoreBranches identityId, nextPage return type export ( ) function successFetchBranches branches, nextPage return type To store the next page API URL we add new attribute into the redux store: the attribute. When it’s value is false app will know that there is no more data to load. branchesNextPage preloadedState = { : { identityId, : [], : , } }; store = createStore(reducers, preloadedState, composeEnhancers(applyMiddleware(epicMiddleware))); const repositories branches branchesNextPage false let The Redux store is then extracted to the component who needs that information with . mapStateToProps In Redux, we distinct presentational and container components. Presentational components render HTML. The container component defines the data and behavior for the presentational components. The container map the data and the actions from the redux store to the presentational component. We use redux to connect the React component with the redux store. connect() mapStateToProps = ({ : state.repositories.branchesNextPage }); mapDispatchToProps = ({ : dispatch(fetchMoreBranches(id, nextPage)) }); AppContainer = connect(mapStateToProps, mapDispatchToProps)(App); const => state branchesNextPage const => dispatch fetchMoreBranches ( ) => id, nextPage const The React Select component has a callback prop which is triggered each time the user scroll options to the bottom. This is the event we will use to load more items to the select box. onMenuScrollToBottom The will dispatch the action and the Redux Observable middleware will execute async ajax call if there is more data to load. fetchMoreBranches <Select options={branches} onChange={ .onBranchChange} value={ .state.selectedBranch} onMenuScrollToBottom={() => .props.fetchMoreBranches( .props.identityId, .props.branchesNextPage) } /> this this this this this Now we came at the most exciting part of this implementation, the redux observable middleware (epic). When the action is dispatched the Redux Observable middleware will be called and async call will be executed. FETCH_MORE_BRANCHES When an async call responds, it will dispatch the new action passing branches to it, and if the next page exists. This action will be caught by reducer to update the redux state. successFetchBranches nextPage SUCCESS_FETCH_BRANCHES In case we catch the error from the backend the will execute Alert box with an error message. catchError { FETCH_MORE_BRANCHES, successFetchBranches } ; { ofType } ; { EMPTY, } ; { ajax } ; { mergeMap, map, catchError } ; tokenHeader ; { showAlertBox } ; fetchLoadMoreBranchesEpic = { action$.pipe( ofType(FETCH_MORE_BRANCHES), mergeMap( { (nextPage === ) { EMPTY; } ajax.post( , { nextPage }, tokenHeader()).pipe( map( successFetchBranches(data.response.branches, data.response.nextPage)), catchError( (showAlertBox( , error.response.message))) ); }) ); }; fetchLoadMoreBranchesEpic; import from '../actions' import from 'redux-observable' import of from 'rxjs' import from 'rxjs/ajax' import from 'rxjs/operators' import from '../../common/helpers/token' import from '../../common/layout' const => action$ return ( ) => { identityId, nextPage } if false return return `/app/auto/repos/branches/ ` ${identityId} => data => error of 'danger' export default The reducer job is to update the redux state and to concatenate loaded branches with an already loaded one. React ; { SUCCESS_FETCH_BRANCHES } ; repositories = { (action.type) { SUCCESS_FETCH_BRANCHES: { { ...state, : state.branches.concat(action.branches), : action.nextPage }; } : { state; } } state; }; repositories; import from 'react' import from '../actions' const ( ) => state = {}, action = [] switch case return branches branchesNextPage default return return export default Now let’s see how loading pagination looks like in action. When scroll reaches the end, the ajax call will load more items into the select box. The Redux in combination with Redux Observable will make React applications organized and easier to maintain and add more features. I suggest you go to the Redux Observable and explore this powerful library. documentation
