2016-11-27 15 views
0

私はネイティブ& Reduxのに反応使用してアプリケーションを構築し、私はdataBlobする方法をfactoriseしたい<ListView>コンポーネントのためだ、sectionIDs & rowIDsされています別のファイル内に関数を作成して格納します。はネイティブ/ Reduxのに反応 - 別のファイルに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)を取得するように反応する要素からそれを呼ぶのですか?

+1

インポート機能をsomefile.js他のモジュールをインポートするのと同じように使用してください。 –

+0

@RishatMuhametshinにお返事ありがとうございます。私はあなたが言うようにする方法を見ることができますが、どのようにReduxストアをその機能に接続するのですか?現在、 'formatDataForListView()'のスコープ外にある 'connect(mapStateToProps)(BookingsListViewObjectsCreator)'によって接続されています。 –

+1

あなたはすでに必要なものを持っています。この関数を純粋に保ち、不変のデータとエンティティを分離しています。あなたの関数はレンダリングだけを行い、データは更新しません。したがって、すぐにインポートしてそのまま使用してください。唯一の違いは、関数がすべてのコンポーネントレンダリングでインスタンス化されないことです。 –

答えて

0

@ oldo.nichoはこのような構造を意味すると思います。 は、単にファイルからその関数をエクスポートして、機能が必要なコンポーネントにインポートし

は//ファイルから

// 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); 
関連する問題