Calling one action from another action creator
I see 2 errors:
You're importing the
fetchSearchResults
function incorrectly.This is where the
TypeError _search2.default
is coming from:Uncaught TypeError: (0 , _search2.default) is not a function
You're dispatching the
fetchSearchResults
action/thunk incorrectly
Error 1: Incorrect import
// This won't work. fetchSearchResults is not the default export
import fetchSearchResults from './search';
// Use named import, instead.
import {fetchSearchResults} from './search';
Error 2: Incorrect action usage
// This won't work, it's just a call to a function that returns a function
fetchSearchResults()
// This will work. Dispatching the thunk
dispatch(fetchSearchResults())
Related videos on Youtube
Comments
-
duhaime almost 2 years
I'm working on a Redux app in which many filter components can change the nature of a search to be performed. Any time the state of one of those filter components changes, I want to re-run a search action. I can't seem to call the search action from each of the filter components correctly, however.
Here's the main search action:
// actions/search.js import fetch from 'isomorphic-fetch'; import config from '../../server/config'; export const receiveSearchResults = (results) => ({ type: 'RECEIVE_SEARCH_RESULTS', results }) export const searchRequestFailed = () => ({ type: 'SEARCH_REQUEST_FAILED' }) export const fetchSearchResults = () => { return (dispatch, getState) => { // Generate the query url const query = getSearchQuery(); // returns a url string return fetch(query) .then(response => response.json() .then(json => ({ status: response.status, json }) )) .then(({ status, json }) => { if (status >= 400) dispatch(searchRequestFailed()) else dispatch(receiveSearchResults(json)) }, err => { dispatch(searchRequestFailed()) }) } }
fetchSearchResults
works fine when I call it from connected React components. However, I can't call that method from the following action creator (this is one of the filter action creators):// actions/use-types.js import fetchSearchResults from './search'; export const toggleUseTypes = (use) => { return (dispatch) => { dispatch({type: 'TOGGLE_USE_TYPES', use: use}) fetchSearchResults() } }
Running this yields:
Uncaught TypeError: (0 , _search2.default) is not a function
. The same happens when I rundispatch(fetchSearchResults())
insidetoggleUseTypes
.How can I resolve this problem and call the
fetchSearchResults
method from theactions/use-types.js
action? -
Craig Myles almost 6 yearsOh, this is great. Took me a little Googling to figure out how to call one action creator from another in different files using
redux-thunk
and this makes perfect sense now. Thanks!