从另一个动作创建者调用一个动作

Question

我正在开发一个 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()) })
  }
}

当我从连接的 React 组件调用它时，

fetchSearchResults 工作正常。但是，我无法从以下动作创建者（这是过滤器动作创建者之一）调用该方法：

// 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。当我在 toggleUseTypes.

中运行 dispatch(fetchSearchResults()) 时也会发生同样的情况

如何解决这个问题并从 actions/use-types.js 操作中调用 fetchSearchResults 方法？

Answer 1

我看到 2 个错误：

您导入的 fetchSearchResults 函数不正确。

这是 TypeError _search2.default 的来源：
```
Uncaught TypeError: (0 , _search2.default) is not a function
```
您发送 fetchSearchResults action/thunk 不正确

错误 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())

从另一个动作创建者调用一个动作

Calling one action from another action creator

reactjs

redux

redux-thunk

react-redux