Recording redux navigation state in model state?

I would approach your use-case in such a way, that I will get the best of both solutions.

First of all, having many actions dispatched you're worried about rendering overhead. Using a selector library, let's say reselect, the library memoization will prevent unnecessarily components rerendering.

Later on, if I understand you correctly, your goal is to let the server know the visibility status of an item (concert) and eventually its visible time. If your goal is notifying the server only, without letting know the rest app's front-end users, why do you want to keep tracking it in Redux too? You can skip the Redux part and send updates to the server only.

Let's assume, that you need Redux for the tracking. You can try on your way structuring the Store, as you already mentioned, adding the visible flag to each object in the Redux store. But if your items' structure is bigger enough and it's costly to copy and update the object each time when changing the visible flag, you can consider creating a dedicated Store branch and reducer, that will be responsible only for the tracking needs. Something like that:

tracking : {
  concerts: {
    1: { visible: true, time: 10 }
  }
}

Now, updating an item's flag, only the above tiny structure has to be copied and modified. Even, you can make it smaller and more specific for a certain item type (trackingConcerts).

* Keep in mind, it's on your own to decide whether or not such a dedicated Store branch will improve the performance, because we don't know your detailed architecture and Store specifics.

Continuing with the solutions ...

Relying on navigation actions + middleware is error prone, as you mentioned. What about the use-case you have a general page of components (i.e. navigation action with generic name will be dispatched), but you render there one of your items (concert)? Also rendering an item, would be always coupled with modifying the mapping logic in your middleware or wherever place you track the items by action name. Another tricky case is when you render different type of items (concerts, venues) on exactly one page. How will you differ and track the items, considering you have only 1 navigation item? Also in a such setup, I don't see a straightforward way for handling an item visible time.

About the selectors as a solution - they can be only a small part of the solution. The selector is responsible for selecting and managing derived state. Nothing more.

Show me the code, please.

I would create a wrapper component around react on screen (or any similar library that tracks component visibility) and implement only the tracking visible time of the component.

The wrapper will trigger callbacks when the component visibility state is changed and a callback on componentDidUnmount including the visible time.

That's all! Now you can attach handlers on these callbacks and you can update your Redux and/or notify the server for the visibility changes, without relying on any navigation actions and middlewares.

Usage:

const App = () => (
  <Tracking
    onVisibilityChange={isVisible => {}}
    onUnmount={visibleSeconds => {}}
  >
    <Concert id={1} />
  </Tracking>
)

Tracking Wrapper:

import TrackVisibility from 'react-on-screen'

const Tracking = ({ children, libraryProps, ...rest }) => (
  <TrackVisibility {...libraryProps}>
    <TrackingCore {...rest}>
      {children}
    </TrackingCore>
  </TrackVisibility>
)

TrackingCore, our custom tracking logic:

class TrackingCore extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      visibleSeconds: 0,
      interval: null
    }
  }

  componentDidMount() {
    this.track()
  }

  componentWillReceiveProps (nextProps) {
    this.track(nextProps)
  }

  componentDidUnmount() {
    const { visibleSeconds, interval } = this.state
    const { onUnmount } = this.props

    onUnmount(visibleSeconds)
    clearInterval(interval)
  }

  track (nextProps) {
    const { isVisible, onVisibilityChange } = this.props
    const { visibleSeconds, interval } = this.state

    const hasVisibilityChanged = (isVisible !== nextProps.isVisible) || !nextProps
    const isVisibleValue = nextProps ? nextProps.isVisible : isVisible

    // On visibility change, invoke the callback prop
    if (hasVisibilityChanged) {
      onVisibilityChange(isVisibleValue)

      // If it becomes visible, start counting the `visibleSeconds`
      if (isVisibleValue) {
        this.setState({
          interval: setInterval(() => this.setState({
            visibleSeconds: visibleSeconds + 1
          }), 1000)
        })
      } else {
        clearInterval(interval)
      }
    }
  }

  render () {
    return this.props.children
  }
}