Idiomatic way of making a thunk action available to components? - react-redux

Question

I have written the following thunk action creator which is used to make a request to an api.
If my understanding is correct, the thunk action creator will be handled by middleware and have access to the store dispatch method.
What is the idiomatic way of making this thunk action creator available to a react component?
The best method I can think of is just importing the thunk action creator directly.
export function fetchMovie(title) {
return (dispatch) => {
dispatch(requestMovie(title));
const url = `http://www.omdbapi.com/?t=${title}&y=&plot=short&r=json`
return axios.get(url)
.then(response => {
dispatch(receiveMovie(title, response.data))
})
.catch(err => dispatch(requestMovieErr(title, err)))
}
}

Answer 1

Yes your assumption is correct. The most common way would be to import individual action functions into your components as needed, such as:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
// step 1: import action 'fetchMovie'
import { fetchMovie } from './actions/whateverYourFileIsCalled';
class SomeComponent extends Component {
render() {
return (
<div>
{/*
step 3: use the 'fetchMovie' action
that is now part of the component's props
wherever we'd like
*/}
<button onClick={this.props.fetchMovie.bind(null, 'Jurassic Park')}>
Click here for dinosaurs
</button>
</div>
);
}
}
SomeComponent.propTypes = {
fetchMovie: PropTypes.func.isRequired
};
export default connect(
{},
{
// step 2:
// connect the 'fetchMovie' action to this component's props using redux helper
fetchMovie
}
)(SomeComponent);