reactjs – Redux：从另一个动作创建者那里调用一个动作

发布时间：2020-12-15 09:33:20 所属栏目：百科来源：网络整理

导读：我正在开发一个Redux应用程序,其中许多过滤器组件可以改变要执行的搜索的性质.每当其中一个过滤器组件的状态发生变化时,我想重新运行搜索操作.但是,我似乎无法正确地调用每个过滤器组件的搜索操作. 这是主要的搜索操作： // actions/search.jsimport fetch f

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

运行它会产生：未捕获的TypeError：(0,_search2.default)不是函数.当我在toggleUseTypes中运行dispatch(fetchSearchResults())时也会发生同样的情况.

我肯定犯了一个新手错误 – 有谁知道如何解决这个问题并从actions / use-types.js动作调用fetchSearchResults方法？我非常感谢其他人可以提出的关于这个问题的建议！

解决方法

我看到2个错误

>您正在错误地导入fetchSearchResults函数

>这是TypeError _search2.default的来源.
>未捕获的TypeError：(0,_ search2.default)不是函数

>您正在错误地调度fetchSearchResults操作/ 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())

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!