प्रतिक्रिया-रेडक्स में पृष्ठ लोड पर कार्रवाई कैसे प्रेषित करें?

Question

मुझे बहुत सारे डेटा के साथ एक टेबल प्रदर्शित करना है। एक पेजिनेशन बटन है जो प्रति पृष्ठ 10 रिकॉर्ड प्रदर्शित करता है। मेरे पास "फ़ेच" नामक एक बटन है, जिस पर टेबल पर क्लिक किया जा रहा है। पेज के लोड पर मेरी टेबल कैसे लोड करें।

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; 

पी.एस. मैं प्रतिक्रिया-रेडक्स के लिए नया हूँ। आधिकारिक दस्तावेज़ीकरण अच्छा है लेकिन बहुत कम स्पष्टीकरण दिया जाता है।

Answer 1

आप इसे अपने पृष्ठ के प्रतिक्रिया घटक के घटक DidMount() से कहते हैं, या जहां भी यह समझ में आता है। तो उस घटक फ़ाइल में:

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

तो यहां कुंजी कनेक्ट सेटअप है। पहला पैरामीटर यह है कि आप राज्य (अपने reducers) को प्रोप के लिए डेटा में कैसे बदलना चाहते हैं। जैसा कि आपको करने की आवश्यकता है समायोजित करें। दूसरा वह है जो आप बांधना चाहते हैं। आप मैन्युअल रूप से प्रेषण भी आयात कर सकते हैं, लेकिन मुझे व्यक्तिगत रूप से यह पैटर्न पसंद है। यह घटक को घटक पर प्रोप के रूप में सेट करता है, और आप इसे इस तरह से कॉल कर सकते हैं। बस इसके लिए तर्कों को पास करें जैसा आपको चाहिए। यह पृष्ठ यहां: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options कनेक्ट फ़ंक्शन को अधिक विस्तार से बताता है।

संपादित

को देखते हुए आप सामने के छोर पर paginating रहे हैं, आप घटक के लिए नीचे पृष्ठांकन डेटा पास करने के, और फिर पाश के माध्यम से यह है कि तुम क्या प्रदर्शित करने के लिए ढंग से काम करते कनेक्ट mapStateToProps को समायोजित करना होगा जरुरत। व्यक्तिगत रूप से मैं बैक एंड पर अंकन करता हूं, और प्रत्येक पृष्ठ के लिए केवल नए अनुरोध करता हूं। इस बात पर निर्भर करता है कि आप कितने रिकॉर्ड प्राप्त कर रहे हैं। कैसे आप रेंडर करने की योजना पर फिर से

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

कुछ मान्यताओं बनाने: उन अनुक्रमित का उपयोग कर योजनाओं के माध्यम से

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

फिर अपने घटक में

, पाश:

तो कनेक्ट में कुछ इस तरह करते हैं यदि आपके पास प्लान इत्यादि नामक एक घटक है, लेकिन यह मोटे तौर पर आप इसके साथ कैसे काम कर सकते हैं।

Answer 2

घटकडिडमाउंट आपके मुट्ठी पृष्ठ को लोड करने का एक अच्छा समय है।

बीटीडब्ल्यू, मेरी राय में, पृष्ठ परिवर्तन कार्रवाई नहीं है, यह आपके डेटा को लोड करने के लिए केवल कुछ param है।

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

<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} /> 

घटक हैंडलर

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

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

कनेक्ट

const mapStateToProps = state => { 
    return { 
    users: state.users 
    } 
} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    loadUsers: (page=0) => dispatch(loadUsers(page)) 
    } 
} 

const Wrapped = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Users) 

केवल एक ACTION

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

इससे मदद मिल सकती है।