Let us say I have a button; which when clicked opens a new window, and downloads a file. How should I structure the handler for this button. Does it go inside the presenter file of the component, since it is just “dumb”; or does it go inside the container component?
Or, to extend @pdavis answer. Build a FileDownLoadButton Component which accepts the fileUrl and prints out exactly what @pdavis wrote. And you stay within the system. Everything else for this is an overkill (container etc)
For your use case I wouldn't write a button with a click handler... I'd just use an anchor tag styled to look like a button.
If the filename is coming from Redux then:
const MyViewComponent = ({ fileUrl }) =>
<div>
{/* ...more stuff... */}
<a href={ fileUrl } target="_blank">Download</a>
</div>
const mapStateFromProps = state => ({
fileUrl: filenameSelector(state)
})
export const MyView = connect(mapStateFromProps)(MyViewComponent)
Or if the name of the file is static then you don't need Redux at all.
<a href="/filename.ext" target="_blank">Download</a>
Quique Borredá
Passionate about web since 1991
I would never tie up a button component with the downloading of just one particular file. Make your button component accept an external function from the parent through something like a handleClick prop, so it's the parent (or the appropriate smart container up the tree) to be the one launching the window, maybe accessing analytics tracking of the event, etc ..
I have a secondary button component that can told what to do when the user interacts with it, so I can configure it as a link to a new tab, an internal route link, or triggering a function .. /**
* @example * <SecondaryBtn icon='icon_view' text='VIEW' href='192.168.0.1' /> * <SecondaryBtn icon='icon_view' text='LINK' linkto='/admin' /> * <SecondaryBtn icon='icon_view' text='FUNC' handleClick={this.parentFunction}} /> */