PlayHistoryPage1.0.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import withRedux from '../nextWithReduxWrapper';
import { FETCH_PLAY_HISTORY } from '../actions';
import PlayHistory from '../components/PlayHistory';

const mapStateToProps = ({ history, artistsById, audioFeaturesById }) => {
    return { history, artistsById, audioFeaturesById };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchHistory: () => dispatch(FETCH_PLAY_HISTORY)
    };
};

class PlayHistoryPage extends React.Component {
  ...
  async getInitialProps() {
    const { fetchHistory } = this.props;
    fetchHistory();
  }
  ...
  render() {
      const { history, artistsById, audioFeaturesById } = this.props
      return (<PlayHistory history={history} artistsById={artistsById} audioFeaturesById={audioFeaturesById}/>)
  }
};

export default withRedux(connect(mapDispatchToProps, dispatchToProps)(PlayHistoryPage));