陣營本地/終極版 - 創建連接到Redux的商店單獨的文件中

我建立使用應用的陣營本地&終極版和一個<ListView>成分，我想factorise的方式輔助函數中dataBlob，sectionIDs & rowIDs是創建並在一個單獨的文件中包含該功能。陣營本地/終極版 - 創建連接到Redux的商店單獨的文件中

在單獨的文件中，我想創建一個名爲formatDataForListView的函數，該函數傳遞一個ID數組，通過該函數可以檢索Redux存儲的正確部分，並相應地構造ListView數組。

我試圖包含陣營元素中的功能不過是因爲我只想return (dataBlob, sectionIDs, rowIDs)，未反應的元素，我得到的錯誤：A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

什麼我迄今所做：

import { Component } from 'react'; 
import { connect } from 'react-redux'; 

class BookingsListViewObjectsCreator extends Component { 
    render() { 
    const { bookings } = this.props; 

    // function that retrieves bookings from Store and structures data 
    // into something suitable for ListViewWithSections 
    const formatDataForListView = bookingIDs => { 
     const dataBlob = {}; 
     const sectionIDs = []; 
     const rowIDs = []; 

     // create array of all the different products for grouping into sections 
     console.log('bookingIDs: ', bookingIDs); 

     bookingIDs.map((id) => { 
     // is product already in sectionIDs array? If not, add to sectionIDs & dataBlob 
     if (sectionIDs.indexOf(bookings[id].product_id) < 0) { 
      sectionIDs.push(bookings[id].product_id); 
      dataBlob[bookings[id].product_id] = bookings[id].title; 
     } 
     // add booking to rowIDs & dataBlob 
     rowIDs.push(bookings[id].id); 
     dataBlob[bookings[id].product_id + ':' + bookings[id].id] = bookings[id]; 
     return id; 
     }); 

     console.log('dataBlob: ', dataBlob); 
     console.log('sectionIDs: ', sectionIDs); 
     console.log('rowIDs: ', rowIDs); 
     return { dataBlob, sectionIDs, rowIDs }; 
    }; 

    // create objects required to render ListView and return them 
    const { dataBlob, sectionIDs, rowIDs } = formatDataForListView(this.props.bookingIDs); 
    return (dataBlob, sectionIDs, rowIDs); 
    } 
} 

const mapStateToProps = state => { 
    return { bookings: state.bookings }; 
}; 

export default connect(mapStateToProps)(BookingsListViewObjectsCreator);

那麼，如何存儲這些直JS功能在一個單獨的文件，並從一個陣營元素調用它來檢索(dataBlob, sectionIDs, rowIDs)？

來源

2016-11-27 oldo.nicho

導入從文件功能並使用它，就像您將導入任何其他模塊一樣。 –

感謝您的回覆@RishatMuhametshin。我可以看到如何操作，但如何將Redux存儲連接到該功能？目前它正在通過連接（mapStateToProps）（BookingsListViewObjectsCreator）進行連接，該連接不在函數'formatDataForListView（）'範圍之內。 –

你已經擁有了你所需要的，保持這個函數是純粹的，數據是不可變的，實體是分開的。你的函數只呈現東西，它不會更新數據。因此，只需將其導入並使用，就像現在一樣。唯一的區別是該函數沒有每個組件渲染實例化。 –

我想@ oldo.nicho意思是一個看起來像這樣的結構。只是從文件導出功能，並將其導入到所需要的功能的組件

// somefile.js

// function that retrieves bookings from Store and structures data 
// into something suitable for ListViewWithSections 
export default function formatDataForListView = bookingIDs => { 
    const dataBlob = {}; 
    const sectionIDs = []; 
    const rowIDs = []; 

    // create array of all the different products for grouping into sections 
    bookingIDs.forEach((id) => { 
    // is product already in sectionIDs array? If not, add to sectionIDs & dataBlob 
    if (sectionIDs.indexOf(bookings[id].product_id) < 0) { 
     sectionIDs.push(bookings[id].product_id); 
     dataBlob[bookings[id].product_id] = bookings[id].title; 
    } 
    // add booking to rowIDs & dataBlob 
    rowIDs.push(bookings[id].id); 
    dataBlob[bookings[id].product_id + ':' + bookings[id].id] = bookings[id]; 
    }); 
    return { dataBlob, sectionIDs, rowIDs }; 
};

// otherfile.js

import { Component } from 'react'; 
import { connect } from 'react-redux'; 
import formatDataForListView from './somefile'; 

class BookingsListViewObjectsCreator extends Component { 
    render() { 
    const { bookings } = this.props; 

    // create objects required to render ListView and return them 
    const { dataBlob, sectionIDs, rowIDs } = formatDataForListView(this.props.bookingIDs); 
    return (dataBlob, sectionIDs, rowIDs); 
    } 
} 

const mapStateToProps = state => { 
    return { bookings: state.bookings }; 
}; 

export default connect(mapStateToProps)(BookingsListViewObjectsCreator);

來源

2016-11-27 05:34:26 theptrk

陣營本地/終極版 - 創建連接到Redux的商店單獨的文件中

回答

相關問題