How to send a page load action in a reduction reaction?

Question

I need to display a table with a lot of data. There is a pagination button that displays 10 entries per page. I have one button called "FETCH" that this table clicks. How to load my spreadsheet when loading a page.

action.js

import fetch from 'isomorphic-fetch'; export const ADD_BENEFICIARY = 'ADD_BENEFICIARY'; export const REMOVE_BENEFICIARY = 'REMOVE_BENEFICIARY'; export const ADD_PLAN_TO_COMPARE = 'ADD_PLAN_COMPARE'; export const REMOVE_PLAN_FROM_COMPARE = 'REMOVE_PLAN_COMPARE'; export const SHOW_PLAN_COMPARE = 'SHOW_PLAN_COMPARE'; export const NEXT_PAGE_PLAN_LIST = 'NEXT_PAGE_PLAN_LIST'; export const PREV_PAGE_PLAN_LIST = 'PREV_PAGE_PLAN_LIST'; export const REQUEST_PAGE_PLAN_LIST = 'REQUEST_PAGE_PLAN_LIST'; export const RECEIVE_PAGE_PLAN_LIST = 'RECEIVE_PAGE_PLAN_LIST'; export const showNextPageOfPlans = () => { return { type: NEXT_PAGE_PLAN_LIST } } export const showPreviousPageOfPlans = () => { return { type: PREV_PAGE_PLAN_LIST } } export const requestPageOfPlans = (startIdx, pageSize) => { return { type: REQUEST_PAGE_PLAN_LIST, start: startIdx, pageSize: pageSize } } export const receivePageOfPlans = (startIdx, json) => { return { type: RECEIVE_PAGE_PLAN_LIST, start: startIdx, plans: json } } export const fetchPlans = (startIdx, pageSize) => { var str = sessionStorage.getItem('formValue'); //JSON.stringify(formValues); return function (dispatch) { dispatch(requestPageOfPlans(startIdx, pageSize)); return fetch('http://172.16.32.57:9090/alternatePlans/plans/list/', {method: 'post', body: str, headers: new Headers({'Content-Type': 'application/json'}) }) .then(response => response.json()) .then(json => dispatch(receivePageOfPlans(startIdx, json)) ) } } 

reducer.js

 import { REQUEST_PAGE_PLAN_LIST, RECEIVE_PAGE_PLAN_LIST, NEXT_PAGE_PLAN_LIST, PREV_PAGE_PLAN_LIST } from './actions'; const initialPaging = { startIndex: 0, lastIndex: 0, pageSize: 10 } const paging = (state = initialCurrentPage, action) => { switch (action.type) { case NEXT_PAGE_PLAN_LIST: if (state.startIndex+state.pageSize <= state.lastIndex) { return { ...state, startIndex: state.startIndex+state.pageSize }; } else { return state; } case PREV_PAGE_PLAN_LIST: if (state.startIndex-state.pageSize >= 0) { return { ...state, startIndex: state.startIndex-state.pageSize }; } else { return state; } case REQUEST_PAGE_PLAN_LIST: return { ...state, isFetching: true }; case RECEIVE_PAGE_PLAN_LIST: return { ...state, isFetching: false }; default: return state; } } var initialPlans = []; const plans = (state = initialPlans, action) => { switch (action.type) { case RECEIVE_PAGE_PLAN_LIST: return action.plans.plans; default: return state; } } const allReducers = (state = {}, action) => { let items = plans(state.plans, action); return { plans: items, paging: paging({ ...initialPaging, ...state.paging, lastIndex: items.length-1 }, action) } } export default allReducers; 

PS I'm new to reaction reduction. The official documentation is good, but very few explanations.

Answer 1

You call it from the componentDidMount () component of the response component for your page, or where it makes sense. So, in this component file:

 import { requestPageOfPlans } from 'actions'; import React from 'react'; import { connect } from 'react-redux'; class MyComponent extends React.Component { componentDidMount() { this.props.requestPageOfPlans(); } } export default connect((state) => state, { requestPageOfPlans })(MyComponent); 

So, the key here is to configure the connection. The first parameter is how you want to convert the state (your gears) into the data for the props. Adjust it as you need. Secondly, what actions do you want to link. You can also import the newsletter manually, but I personally like this template. It sets up actions as a props for a component, and you can name it that way. Just pass the arguments as you need. This page here: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options explains the connection function in more detail.

Edit

Given that you are paginating, you need to configure the connect mapStateToProps function to transfer the pagination data to the component, and then scroll to display what you need. Personally, I did pagination in the background and just made new requests for each page. Depends on how many records you expect.

So, in the connection, do something like this:

 export default connect((state) => { return { startIndex: state.paging.lastIndex, pageSize: state.paging.pageSize, lastIndex: state.paging.lastIndex, plans: state.plans }; }, { requestPageOfPlans })(MyComponent); 

Then, in your component, swipe the plan using these indexes:

  render() { const plans = []; const maxIndex = Math.min(this.props.startIndex + this.props.pageSize, this.props.lastIndex); for (let i = this.props.startIndex || 0; i < maxIndex; i++) { const plan = this.props.plans[i]; plans.push(<Plan key={plan.id} plan={plan} />); } return ( <ul>{plans}</ul> ); } 

We repeat some assumptions about how you plan to display it, if you have a component called Plan, etc. But that’s about how you can work with it.

Answer 2

componentDidMount is a good time to load your first page.

By the way, in my opinion, changing the page is not an action, it is just some parameter for loading your data.

Actioncreator

 const userurl = '/rest/users' export const loadUsers = (page = 0) => { return (dispatch) => { axios.get(userurl+"?page="+page) .then(function(resp) { dispatch(loadUsersOK(resp.data._embedded.users, resp.data.page)); }) .catch(function(error) { ... }) }; } 

JSX component

 <span style={{marginRight:15, fontSize: 14, color: '#333'}}>{page.number*page.size+1}-{page.number*page.size+page.size} of {' '} {page.totalElements}</span> <FlatButton style={flatButtonStyle} icon={<NavigationChevronLeft/>} onTouchTap={this.prevPage} /> <FlatButton style={flatButtonStyle} icon={<NavigationChevronRight/>} onTouchTap={this.nextPage} /> 

Component Handlers

  prevPage() { const { page } = this.props.users; this.props.loadUsers(page.number - 1); } nextPage() { const { page } = this.props.users; this.props.loadUsers(page.number + 1); } 

To plug

 const mapStateToProps = state => { return { users: state.users } } const mapDispatchToProps = (dispatch, ownProps) => { return { loadUsers: (page=0) => dispatch(loadUsers(page)) } } const Wrapped = connect( mapStateToProps, mapDispatchToProps )(Users) 

ONLY ONE ACTION

 export const loadUsersOK = (result, page) => ({ type: LOAD_USERS_OK, result, page }) 

Help.