React Native / Redux-在单独的文件中创建连接到Redux存储的帮助函数

Question

I'm building an app using React Native & Redux and for a <ListView> component I'd like to factorise the way in which dataBlob , sectionIDs & rowIDs are created and contain the function within a separate file.

Within the separate file I'd like to create a function called formatDataForListView which is passed an array of IDs, with which the correct parts of the Redux store can be retrieved and the ListView arrays are constructed accordingly.

I've tried to contain the function within a React element however because I just want to return (dataBlob, sectionIDs, rowIDs) , which aren't React elements, I'm getting the error: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

What I've done thus far:

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

So how do I store this straight JS function in a separate file and call it from a React element to retrieve (dataBlob, sectionIDs, rowIDs) ?

Answer 1

I think @oldo.nicho means a structure to looks like this. Just export that function from a file and import it into the components that need the functionality

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