与redux异步工作？但仍然会出错，我应该忽略它吗？

Question

我正在使用laravel混合物，反应。

尝试实现redux-thunk中间件。 我遇到异步调用问题。 我想使用jquery for ajax（成功检索API数据，但我收到的错误是读取，

“错误：调度不是函数”，这意味着我无法对商店进行任何更改。据我所知，dispatch和GetState通过thunk中间件传递。正确吗？为什么我不能使用这个功能？

它还给出了一个错误，内容为：“错误：操作可能没有未定义的”类型“属性。你拼错了一个常量吗？”

在尝试处理上述问题后出现的另一个问题是：“错误：操作必须是普通对象。使用自定义中间件进行异步操作。”

我已经阅读了许多类似的问题，但我似乎仍无法让它发挥作用。

“操作必须是普通对象。使用自定义中间件进行异步操作。”

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import FilterBar from './SideBar/FilterBar';
import Store from '../redux/store/mainStore';
import { REMOVE_ATTRIBUTE_FILTER,ADD_ATTRIBUTE_TO_FILTER, removeAttribute } from '../redux/actions/actions';

Store.subscribe(()=>{
    console.log("store changes", Store.getState())
})



console.log(Store.getState());

Store.dispatch({
type:ADD_ATTRIBUTE_TO_FILTER,
payload:{'make':23}

})


if (document.getElementById('InventoryDisplay')) {
  
        
    ReactDOM.render(
        <Provider store={Store}>
        <FilterBar/>
        </Provider>
        ,document.getElementById('FilterBar'));

   
}

mainstore.js

```

import { createStore,applyMiddleware,combineReducers,compose } from 'redux';
import thunk from 'redux-thunk';
import {inventoryFilter,availableAttributes} from '../reducers/reducer';


const Store = createStore(

///combine imported reducers
    combineReducers({
    activeFilter:inventoryFilter,
    availableAttributes:availableAttributes

},
///initilize store
{},


applyMiddleware(thunk)


));



export default Store;

```

actions.js什么是相关的

```

///first case
const getAttributes2 = (dispatch) => {
  return(
    $.ajax('/getFilteredAttributes/', {
        type: 'GET',
        dataType : 'json'
    }).done(response => {
        dispatch(addAttribute("make",32));
    }).fail((xhr, status, error) => {
        console.log("failed");
    })
  )

};

///second case
const getAttributes = (dispatch) => {
  return ()=>{}

}


export {
  ADD_ATTRIBUTE_TO_FILTER,addAttribute,
  REMOVE_ATTRIBUTE_FILTER,removeAttribute,
  GET_INVENTORY,getInventory,
  GET_AVAILABLE_ATTRIBUTES,getAttributes,
  

}

```

组件连接到存储调度操作

```

import React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import * as ActionCreators from '../../../redux/actions/actions';

class DropDownList extends React.Component{
    componentDidMount(){
        this.props.addAttributes("make",32)
        this.props.getAttributes()
        this.props.removeAttributes("make",32)
            

    }
    render(){
  
        return(
        
            <div>
            </div>

        )




        
    }






    
}





function mapStatesToProps(state){
   return{
    activeFilters:state.activeFilter,
    availableAttributes:state.availableAttributes
   } 
};

const mapDispatchToProps = dispatch => {
    return {
        addAttributes: (type,value) => {
            dispatch(ActionCreators.addAttribute(type,value))
          },
        removeAttributes: (type,value) => {
            dispatch(ActionCreators.removeAttribute(type,value))
          },
        getAttributes: () => {
            dispatch(ActionCreators.getAttributes())
          }
    }
}

DropDownList.propTypes = {
    availableAttributes: PropTypes.object.isRequired,
    activeFilters: PropTypes.object.isRequired,
  }
export default connect(mapStatesToProps,mapDispatchToProps)(DropDownList)

```

我对第二个错误的情况一的解决方案是将ajax函数调用放入包含“type”属性的对象中。像这样

return (

  {
    type: "Something",


    $.ajax('/getFilteredAttributes/', {
      type: 'GET',
      dataType: 'json'
    }).done(response => {
      dispatch(addAttribute("make", 32));
    }).fail((xhr, status, error) => {
      console.log("failed");
    })

  })

ajax调用已经完成，但调度仍然无法使用，我迷失了并寻找最佳解决方案？也许我正在过度思考或错过了一些细节。我尝试了其他解决方案，但没有一个对我有用。

请帮助。

Answer 1

很难确切地知道发生了什么，但我绝对不建议忽略/黑客攻击您使用常用图书馆的常见功能所犯的错误。为简单起见，让您的实施变得正确非常重要。

在我看来，你使用thunk的方式有点奇怪。 您调度的操作返回的函数将dispatch和getState作为参数：

在你的情况下你的thunk动作可能看起来像这样

在你的actions.js中：

export function getAttributes2(){
  return function(dispatch, getState){
    // you could dispatch a fetching action here before requesting!
    return $.ajax('/getFilteredAttributes/', {type: 'GET', dataType: 'json'})
      .done(response => dispatch(saveTheResponseAction(response)))
      .fail((xhr, status, error) => console.log("failed"))
}

将thunk函数映射到您的道具：

import {getAttributes2} from '../../../redux/actions/actions';

const mapDispatchToProps = dispatch => {
  return {
    getAttributes2: () => dispatch(getAttributes2()),
  }
}

通过这种方式，您可以从api调用的.done部分发送操作，其中包含结果，您可以回复错误，甚至可以在返回api调用之前发送操作，让redux知道您的结果。已请求但尚未收到数据，允许您执行各种加载状态。

我希望这有帮助，让我知道:)。