Redux: вызов одного действия от другого создателя действий

Я работаю над приложением Redux, в котором многие компоненты фильтра могут изменять характер выполняемого поиска. Каждый раз, когда состояние одного из этих компонентов фильтра изменяется, я хочу повторно запустить действие поиска. Однако я не могу правильно вызвать действие поиска из каждого из компонентов фильтра.

Вот основное действие поиска:

// 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 отлично работает, когда я вызываю его из подключенных компонентов React. Однако я не могу вызвать этот метод из следующего создателя действия (это один из создателей действия фильтра):

// actions/use-types.js
import fetchSearchResults from './search';

export const toggleUseTypes = (use) => {
  return (dispatch) => {
    dispatch({type: 'TOGGLE_USE_TYPES', use: use})
    fetchSearchResults()
  }
}

Выполнение этого дает: Uncaught TypeError: (0 , _search2.default) is not a function. То же самое происходит, когда я запускаю dispatch(fetchSearchResults()) внутри toggleUseTypes.

Я определенно делаю ошибку новичка - кто-нибудь знает, как я могу решить эту проблему и вызвать метод fetchSearchResults из действия actions/use-types.js? Буду очень признателен за любой совет, который могут дать другие по этому вопросу!


reactjs redux react-redux redux-thunk
person duhaime    schedule 02.01.2018    source источник

Ответы (1)


arrow_upward
52
arrow_downward

Я вижу 2 ошибки

  1. 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
  2. Вы неправильно отправляете действие / преобразователь fetchSearchResults

Ошибка 1: неправильный импорт.

// This won't work. fetchSearchResults is not the default export
import fetchSearchResults from './search';
// Use named import, instead.
import {fetchSearchResults} from './search';

Ошибка 2: неправильное действие

// 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())
person Cory Danielson    schedule 02.01.2018
comment
Аминь, большое спасибо @CoryDanielson! Я приму это через 5 минут (ТАК заставляет ждать почему-то). - person duhaime; 02.01.2018
comment
О, это здорово. Мне потребовалось немного погуглить, чтобы выяснить, как вызывать одного создателя действий из другого в разных файлах с помощью redux-thunk, и теперь это имеет смысл. Спасибо! - person Craig Myles; 09.08.2018
comment
Хотел бы я проголосовать за это больше одного раза. Это помогло мне, когда я полностью заблудился, спасибо @Cory Danielson! - person Tim Manchester; 15.03.2021
comment
Уф! Большое спасибо Кори. - person Marvelous Ikechi; 26.07.2021